CSS Media queries OR

Use OR statements for exclusive media queries

Gav McKenzie
Gav McKenzie
Industry

In this article

You might know the media query AND statement right?

@media (min-width: 40em) and (max-width: 80em) {
/* Applies between 40em and 80em width */
}

Well you can also do OR statements by using commas!

@media (max-width: 40em), (min-width: 80em) {
/* Applies up to 40em width and at more than 80em width */
}

Bonus

You can do NOT statements too.

Caveat: the not has to come before the media type.

@media not all and (min-width: 40em) {
/* Applies at less than 40em width */
}

More information on CSS Tricks.

Etch is a web software consultancy based in the UK©2012-2024 Etch Software Ltd - Policies