1

What are the difference between:

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

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

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

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

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

Also, is it required to add the 'and' keyword?

Sugarpearl
  • 95
  • 6
  • 1
    Before media query was introduced (i.e. pre-CSS3 era), `@media` was to detect _media type_ (e.g. `screen`, `print`, etc). [See this SO answer](https://stackoverflow.com/a/9286360/7216508) for the details on `only` keyword. About logics in media queries (e.g. `if`/`else`/`or`/`not`), see [this CSS Tricks article](https://css-tricks.com/logic-in-css-media-queries/). – Bumhan Yu Jan 20 '23 at 05:34

0 Answers0