Search code examples
cssmedia-queries

What are the difference between these media queries?

What are the difference between these:

@media (max-width: 100px) { /* CSS Rules */ }

@media screen (max-width: 100px) { /* CSS Rules */ }

@media screen and (max-width: 100px) { /* CSS Rules */ }

@media only screen and (max-width: 100px) { /* CSS Rules */ }

@media only screen (max-width: 100px) { /* CSS Rules */ }

Thank you! :)

Solution

  • The only difference between these examples is the syntax.

    @media (max-width: 100px) { /* CSS Rules */ } - this is a basic media query that checks the maximum width of the screen. Since no media type is specified it defaults to screen.

    @media screen (max-width: 100px) { /* CSS Rules */ } - this media query is similar to the first one, but it explicitly specifies the media type as screen.

    @media screen and (max-width: 100px) { /* CSS Rules */ } - this is the same as the second example - the and is implied in the prior case but explicitly set here.

    @media only screen and (max-width: 100px) { /* CSS Rules */ } - this media query is the most specific and recommended syntax. It uses the only keyword to hide the media query from older, incompatible browsers, and it explicitly specifies the media type as screen.

    @media only screen (max-width: 100px) { /* CSS Rules */ } - this is similar to the fourth example, but it does not use the and keyword explicitly.