CODEWITHSUNDEEP
htmlcssmedia-queries
Deadpool
Deadpool

Reputation: 8240

Media Query for all platforms, which one is the correct syntax

With respect to the following link:

What is the difference between "screen" and "only screen" in media queries?

"only" is used in media-query so that old browsers, which do not support media query should read only (and as hyphenated or alphabets are not present, but a space - they will stop further reading) and the rest of the code will not be applied (as 'only' is not a device type).

In conclusion, we should always write "only" as good practice and our code will be like this:

@media only screen and (min-width: 300px) and (max-width: 800px) { ... }

But, with that logic and applying only to prevent old browsers from messing up code whhile they don't support media query and otherwise screen keyword after being read - the following CSS will be applied globally (see the link above).

Now, what if I want to write certain media query for all platforms, viz. https://www.w3.org/TR/CSS2/media.html

What should my correct code be now:

@media only all and (min-width: 300px) and (max-width: 500px) { ... }

OR

@media all and (min-width: 300px) and (max-width: 500px) { ... }

Remember, all is a device-type keyword, so with the same logic, older-browsers will (if only keyword is not used), whatever CSS code is present will be applied globally.

On the other hand I have never seen a code such as only all so what I expect is to be syntactically-wrong and CSS will not run.

Now, can someone provide me solution with reason, which of the 2 options is correct?

Upvotes: 1

Views: 137

Answers (1)

Ahmad Dalao
Ahmad Dalao

Reputation: 2056

Since all browsers right now support media query you can just use @media and it will work without any problem. Also bootstrap uses @meida which is something that works on all browsers right now.

@media (min-width: 300px) and (max-width: 500px) { ... }

Therefore you just need to use @media and you will get the same result as if you used

@media only screen and (min-width: 300px) and (max-width: 500px) { ... }

Please refer to this link am sure it will be helpful MDN @media

Also, this link is extremely useful MDN media query

Upvotes: 1

Related Questions