CSS Media queries OR

Use OR statements for exclusive media queries

Gav McKenzie
Author
Gav McKenzie
Published
Jul 23, 2018
Topics
Industry

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