CSS Media Queries syntax

Question

I'm very confused about the syntax of media queries, I saw many examples and each one has a different syntax, for example:

1. @media only screen and (max-width: 420px) {...}
2. @media screen and (max-width: 420px) {...}
3. @media (max-width: 420px) {...}

What is the different between these three examples?

Are all of them legal?

And another question, I understand that you can write all instead of screen, but I never saw it in any example, why? is there something wrong with writing like this?

@media all and (max-width: 750px) {...} 

I know that sometimes people connect their mobile or PC to the TV and watch the things there, so if I want that my website will display correctly also on TV, isn't it better to use all instead of screen? (as I understood the option 'tv' was Deprecated).

Thanks.

Answer 1

Yes, they are valid syntaxes. Generally, in web development, people write CSS to make webpage display a certain generic way on mobile or web. Those pages are not designed to look same way on every output medium, say on mobiles with different screen sizes, handheld tablets or you may want printed output of your page to look slightly different from your original page. May be, you want to hide certain details from print document or show some additional details to tablet users.

You can avoid designing pages for screens of every size separately and use media queries instead. That way, you can design your web page once and it will work and fit fine for all media (screen, print, speech, tv, mobile in portrait or landscape orientation with different screen sizes etc.).

Previously, if you would know, companies had different teams to design pages for website, mobile, table, iPhone retina display. People used to create different stylesheets for different stuff like print and mobile. May be HTML changes would also be required for display. Media query brings all these things under one umbrella. so, now you can design page once and it by styling it with media queries for different media or screen sizes, you can get different output on different devices. Same HTML 5 and CSS 3 code working in different look on different output medium.

Check out more at http://cssmediaqueries.com/

https://www.tutorialrepublic.com/css-tutorial/css3-media-queries.php

Answer 2

@media only screen and (max-width: 420px) {...}

For a window with a max-width of 420px that you want to apply these styles.

@media screen and (max-width: 420px) {...}

For a device with a screen and a window with max-width of 420px apply the style.

@media (max-width: 420px) {...}
@media all and (max-width: 420px) {...}

For @media and can also be used for print interfaces not only screen.

All are legal no problem to use. Sometimes we need to do different stuff in print mode than Screen mode. So Use Properly when you need what.

Answer 3

Everything works, it is just different if you want to target something like devices only. I use 2nd example from your question always, but everything will work.