CSS Media queries OR

Use OR statements for exclusive media queries

Gav McKenzie
Gav McKenzie
Jul 23, 2018

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 */


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