By mindmyweb July 14th 2016
How to write a media query to target specific devices.
A media query is introduced in CSS3. You can use @media rule to include CSS properties only if a certain condition is true. For example you can define different style in @media rule when user agent has max or min-width:320px or as per your choice.
Back to point, Now I’m going to discuses what is the different between @media OR @media screen OR @media only screen.
Let’s break down one by one.
@media (max-width:600px){}
This code is saying that you can apply max-width:600px for a window.
@media screen and (max-width:600px){}
This code is saying that you can apply max-width:600px for a device with a screen and a window with max-width of 600px. This is almost identical to the above because here you are specifying screen in code.
@media only screen and (max-width:600px){}
This code is saying that you can use this to hide style sheets from older user agents when max-width:600px
Here is a quote 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.
Go here and check out Example 9.
