0

I have noticed that almost all tutorials on css media queries for responsive websites suggest using something like the following:

@media only screen and (max-width: 700px){

}

Although I understand that the "only screen" part makes it only appear on devices with a screen, I fail to understand why that would be desirable. If the media query makes the site look better on screens smaller than 700px, wouldn't it also be good to have it apply when printing to paper smaller than 700px?

Is their something risky (or not browser supported) about doing the following instead?

@media all and (max-width: 700px){

}
Daniel
  • 794
  • 10
  • 20
  • it is up to you , but this is the proper coding for a surfing purpose. – ProllyGeek Apr 15 '14 at 21:53
  • 1
    Possible duplicate of [What is the difference between "screen" and "only screen" in media queries?](https://stackoverflow.com/questions/8549529/what-is-the-difference-between-screen-and-only-screen-in-media-queries) – clickbait Jul 26 '18 at 23:19

1 Answers1

3

If you look at this question, it explains that the "only screen" part hides the media query from older browsers. So if you're doing something very bleeding-edge, and want to only show it to new browsers, that could be an option.

This quote says the same thing (Scroll down to example 9), in case the question is removed.

Community
  • 1
  • 1
Meg
  • 1,462
  • 12
  • 23