Media Screen

What is the difference between:
@media only screen
@media only screen
vs
@media screen
@media screen
And which one is better to use to target small screen devices for responsiveness?
9 Replies
Myndi
Myndi•3y ago
Type in "media" in the search bar in here, there's an answer right below your post.
iLoveCoffee
iLoveCoffeeOP•3y ago
Sorry but it does not answer my question.
iLoveCoffee
iLoveCoffeeOP•3y ago
Actually I wanted to know the difference between "media screen" vs "media only screen". Its similar but not exactly same. Sometimes very little difference makes big difference. Anyway, never mind
Myndi
Myndi•3y ago
Yeah, that's what it says there. Basically only screen doesn't apply styles to printing, while media does.
iLoveCoffee
iLoveCoffeeOP•3y ago
So Media Only Screen same as Media Screen?
Myndi
Myndi•3y ago
Media does consider styles when printing.
13eck
13eck•3y ago
only in media queries is more a "fix" for backwards compatibility than anything else, it seems:
Applies a style only if an entire query matches. It is useful for preventing older browsers from applying selected styles. When not using only, older browsers would interpret the query screen and (max-width: 500px) as screen, ignoring the remainder of the query, and applying its styles on all screens. If you use the only operator, you must also specify a media type.
–https://developer.mozilla.org/en-US/docs/Web/CSS/@media#only
iLoveCoffee
iLoveCoffeeOP•3y ago
Thanks, I have decided to go with only šŸ™‚

Did you find this page helpful?