What does @media screen and (max-width: 1024px) mean in CSS?

by

That’s a media query. It prevents the CSS inside it from being run unless the browser passes the tests it contains.

The tests in this media query are:

  1. @media screen — The browser identifies itself as being in the “screen” category. This roughly means the browser considers itself desktop-class — as opposed to e.g. an older mobile phone browser (note that the iPhone, and other smartphone browsers, do identify themselves as being in the screen category), or a screenreader — and that it’s displaying the page on-screen, rather than printing it.

  2. max-width: 1024px — the width of the browser window (including the scroll bar) is 1024 pixels or less. (CSS pixels, not device pixels.)

That second test suggests this is intended to limit the CSS to the iPad, iPhone, and similar devices (because some older browsers don’t support max-width in media queries, and a lot of desktop browsers are run wider than 1024 pixels).

However, it will also apply to desktop browser windows less than 1024 pixels wide, in browsers that support the max-width media query.

Here’s the Media Queries spec, it’s pretty readable:

More Related Contents:

  1. Media Queries: How to target desktop, tablet, and mobile?
  2. Why does the order of media queries matter in CSS?
  3. What is the difference between “screen” and “only screen” in media queries?
  4. CSS @media print issues with background-color;
  5. CSS media queries: max-width OR max-height
  6. Common breakpoints for media queries on a responsive site
  7. Should I use max-device-width or max-width?
  8. Media query to detect if device is touchscreen
  9. Common CSS Media Queries Break Points [duplicate]
  10. CSS media query to target only iOS devices [duplicate]
  11. What are the rules for CSS media query overlap?
  12. CSS native variables not working in media queries
  13. Extending selectors from within media queries with Sass
  14. Which are the most important media queries to use in creating mobile responsive design?
  15. CSS media queries min-width and min-device-width conflicting?
  16. IE7, IE8 support for css3 media query [duplicate]
  17. calc() not working within media queries
  18. Max-Width vs. Min-Width
  19. Detect if a browser in a mobile device (iOS/Android phone/tablet) is used
  20. How to make responsive table [closed]
  21. iPhone X / 8 / 8 Plus CSS media queries
  22. How to control number of items per row using media queries in Flexbox?
  23. How do I combine two media queries?
  24. How can I avoid media query overlap?
  25. Media Query grouping instead of multiple scattered media queries that match
  26. Single vs multiple stylesheets in responsive web design
  27. @import styles not working in a media query
  28. Media queries and background images
  29. @media query not working in mobile. Works fine in Chrome
  30. @media media query and ASP.NET MVC razor syntax clash

Leave a Comment