Menu
What is the difference between screen and only screen in media queries?
<link media="screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" /> <link media="only screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" /> Why are we required to use only screen? Does screen not itself provide enough information to be rendered only for screen?
I've seen many responsive websites using any of these three different ways:
@media screen and (max-width:632px) @media (max-width:632px) @media only screen and (max-width:632px) 
592
Max-width and min-width can be used together to target a specific range of screen sizes. @media only screen and (max-width: 600px) and (min-width: 400px) {...} The query above will trigger only for screens that are 600-400px wide. This can be used to target specific devices with known widths.
The @media CSS at-rule can be used to apply part of a style sheet based on the result of one or more media queries. With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.
The 'reader' media type The keyword 'reader' is a "media type" as defined by Media Queries [MEDIAQ]. It can be used in all places where Media Queries can be used (including LINK elements in HTML, the style PI in XML and @import/@media in CSS).
If you want to include both min and max width for responsiveness in the browser, then you can use the following: @media (min-width: 768px) and (max-width: 992px){...} @media (min-width: 480px) and (max-width: 767px) {...}
Let's break down your examples one by one.
@media (max-width:632px) This one is saying for a window with a max-width of 632px that you want to apply these styles. At that size you would be talking about anything smaller than a desktop screen in most cases.
@media screen and (max-width:632px) This one is saying for a device with a screen and a window with max-width of 632px apply the style. This is almost identical to the above except you are specifying screen as opposed to the other available media types the most common other one being print.
@media only screen and (max-width:632px) Here is a quote straight from W3C to explain this one.
The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.
As there is no such media type as "only", the style sheet should be ignored by older browsers.
Here's the link to that quote that is shown in example 9 on that page.
Hopefully this sheds some light on media queries.
EDIT:
Be sure to check out @hybrids excellent answer on how the only keyword is really handled.
157
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
