Search code examples
htmlcssresponsive-designmedia-queries

Difference in CSS media query syntax

When I learned to write CSS3 media queries the syntax that was shown to me is this:

@media only screen and (max-width: Xpx){}

Xpx meaning any number you enter of course. As of late, I have seen several other devs, here on Stack mostly, writing CSS media queries simply like this:

@media (max-width: Xpx){}

When I go to websites like Mozilla's Documentation pages and W3Schools.com, they seem to use it the same way I am, like in my first example. Something else I learned a long time ago is not to write code if I don't know why I am writing it. After seeing that the syntax of the query could be written without the 'screen only' part, I have to ask, what is the difference in how I am writing my CSS media queries, and how other developers are writing theirs?

Solution

  • only screen means just that: only for screens (as opposed to being for all kinds of media, such as print outs).