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.
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:
This means that the query is evaluated like this:
... rather than like this:
The only
keyword prevents older browsers that do not support media queries with media features from applying the given styles
If you want to read more about responsive webdesign, I would recommend the two articles from Smashing Magazine and Responsive design.is.
Last updated
Was this helpful?