What is the difference between @media only screen and (max-width: 800px) and @media (min-width: 800px)

Question

I am a beginner in html media screen CSS. What is the meaning of this: min and max width in media screen

Please use Google or StackOverflow search. http://stackoverflow.com/questions/13550541/media-min-width-max-width — Andrew Dunai, Oct 19 '14 at 13:11
http://stackoverflow.com/questions/8549529/what-is-the-difference-between-screen-and-only-screen-in-media-queries — Vitorino fernandes, Oct 19 '14 at 13:11

score 0 · Answer 1 · edited May 23 '17 at 12:33

Just consider @media (max-width:800px).Here you took the width as 800.SO for a window with a max-width of 800px that you want to apply styles.

Now consider @media only screen and (max-width:800px)

According to the w3c explanation.

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.

PLease Have a look here to point out more difference

score 0 · Answer 2 · answered Oct 19 '14 at 13:16

"only screen" shows on what "device" will this styles (max, min width) apply. See it here - http://www.w3schools.com/css/css_mediatypes.asp

Max-width: 800px says that when the screen is smaller than 800px, the styles in the {} will apply. Min-width is the oposite.

What is the difference between @media only screen and (max-width: 800px) and @media (min-width: 800px)

2 Answers2