Comma Separated List

If only one of multiple media features in a media query must be met, media features can be separated in a comma separated list.

For example, if we needed to apply a style when only one of the below is true:

• The screen is more than 480 pixels wide
• The screen is in landscape mode

We could write:

@media only screen and (min-width: 480px), (orientation: landscape) {
    /* CSS ruleset */
}

In the example above, we used a comma (,) to separate multiple rules. The example above requires only one of the media features to be true for its CSS to apply.

Note that the second media feature is orientation. The orientation media feature detects if the page has more width than height. If a page is wider, it's considered landscape, and if a page is taller, it's considered portrait.