Complex Media Queries

A complex media query is one where the browser looks at multiple conditions to asses when the rules should be applied. This could also be known as a multi-part conditional statement.

For example, we might have a media query that looks to be larger than some size, but also smaller than another size. We could write this like;

CSS
@media (min-width: 500px) and (max-width: 600px) {
    /* Do Something */
}

You can read more about media queries on the Mozilla Developer Networks site;

Media Queries Quiz


Previous section:
Next section: