@media

Use this special syntax to instruct the browser to use the enclosed rules only on certain devices or under certain conditions.

Syntax

The syntax for @media consists of two things: a type of device and a set of limiting features. The CSS selectors enclosed within the media rule set are put into effect only when the browser displays a document with a device and features that match those conditions.

The media rule set comprises all of the CSS selectors and their property declarations enclosed within the pair of curly braces immediately following the @media expression.

Here are examples demonstrating the idea:

#menu {
    display: block;
}

@media print {
    #menu {
        display: none;
    }
}
							

html {
    font-size: 12pt;
}
@media screen and (max-width: 50rem) {
    html {
        font-size: 11pt;
    }
}
@media screen and (max-width: 40rem) {
    html {
        font-size: 10pt;
    }
}
							

Limiting expressions

Limiting features are used in limiting expressions which use syntax like this: (feature: value) where the feature keyword is followed by a colon and a value, and both are enclosed in parentheses.

This syntax may be interpreted as "does the user's device support the feature with this value". When the answer is yes, the media rule set is in force. When the answer is no, the media rule set is ignored.

Keywords and features used in limiting expressions

Combining expressions

More than one limiting expression may be specified for each @media rule, in which case, the media rule set will be in force only when all of them are true.

Rules can be combined using the word "and", for example:

@media (orientation: landscape) and (max-width: 50rem) {
    ...
}
							

Rules can also be combined using the word "or", for example:

@media (orientation: landscape) or (max-width: 50rem) {
    ...
}
							

Alternate expressions

The same media rule set may be used under different sets of conditions. To specify this, place a comma between each limiting expression which is to be evaluated on its own merits.

For example:

@media (orientation: landscape) and (max-width: 50rem), (orientation: portrait) and (max-width: 30rem) {
    ...
}
							

Negative expressions

A media expression may be negated, causing the media rule set to be honored under the opposite meaning. To accomplish this, use the word not before the expression and enclose the whole in parentheses.

@media screen and (orientation: landscape) and (not (max-width: 50rem)) {
    ...
}
							

@media not (screen and (orientation: landscape) and (max-width: 50rem)) {
    ...
}
							

Range operators

For features that can have a range of values, like width and height, the less-than-or-equal oparator may be used. For example:

@media (35rem <= width <= 45rem) {
    ...
}