Logical operators

You can create complex media queries using the logical operators and, not, and only.

The and operator is used to combine multiple media features together into a single media query. Each expression must resolve to true for the query to be true.

@media (max-width: 600px) and (orientation: landscape){
    ...
}

The not keyword applies to the whole media query and returns true if the media query would otherwise return false (such as monochrome on a color display or a screen width of 600px with a min-width: 700px feature query). A not will only negate the media query it is applied to and not to every media query if present in a comma-separated list of media queries. The not keyword cannot be used to negate an individual feature query, only an entire media query. For example, the not is evaluated last in the following query:

@media not all and (monochrome) {
  ...
}

This means that the query is evaluated like this:

@media not (all and (monochrome)) {
  ...
}

... rather than like this:

@media (not all) and (monochrome) {
  ...
}

The only keyword prevents older browsers that do not support media queries with media features from applying the given styles

@media only screen {
  ...
}

If you want to read more about responsive webdesign, I would recommend the two articles from Smashing Magazine and Responsive design.is.

Last updated