• Media types define the broad category of device for which the media query applies: all, print, screen.

  The type is optional (assumed to be all) except when using the only logical operator.

• user agent, output device, or environment:

  • any-hover
  • any-pointer
  • aspect-ratio
  • color
  • color-gamut
  • color-index
  • device-aspect-ratio Deprecated
  • device-height Deprecated
  • device-posture
  • device-width Deprecated
  • display-mode
  • dynamic-range
  • forced-colors
  • grid
  • height
  • hover
  • inverted-colors
  • monochrome
  • orientation
  • overflow-block
  • overflow-inline
  • pointer
  • prefers-color-scheme
  • prefers-contrast
  • prefers-reduced-motion
  • prefers-reduced-transparency
  • resolution
  • scripting
  • update
  • video-dynamic-range
  • width

  For example, the hover feature allows a query to check whether the device supports hovering over elements. Media feature expressions test for their presence or value, and are entirely optional. Each media feature expression must be surrounded by parentheses.

• Logical operators can be used to compose a complex media query: not, and, and only. You can also combine multiple media queries into a single rule by separating them with commas.

A media query computes to true when the media type (if specified) matches the device on which a document is being displayed and all media feature expressions compute as true. Queries involving unknown media types are always false.

@media print {
  /* … */
}

You can also target multiple devices. For instance, this @media rule uses two media queries to target both screen and print devices:

@media screen, print {
  /* … */
}

See media types for the list of available media types. Because media types describe devices in very broad terms, most of the originally-defined media types were deprecated, with just screen, print, and all remaining. To target more specific attributes, use media features instead.

@media (hover: hover) {
  /* … */
}

Media features are either range or discrete.

Discrete features take their value from an enumerated set of possible keyword values. For example, the discrete orientation feature accepts either landscape or portrait.

@media print and (orientation: portrait) {
  /* … */
}

Many range features can be prefixed with "min-" or "max-" to express "minimum condition" or "maximum condition" constraints. For example, this CSS will apply styles only if your browser's viewport width is equal to or narrower than 1250px:

@media (max-width: 1250px) {
  /* … */
}

The following media queries are equivalent to the above example:

@media (width <= 1250px) {
  /* … */
}

@media (1250px >= width) {
  /* … */
}

With media query range features, you can either use the inclusive min- and max- prefixes or the more concise range syntax operators <= and >=.

The following media queries are equivalent:

@media (min-width: 30em) and (max-width: 50em) {
  /* … */
}

@media (30em <= width <= 50em) {
  /* … */
}

@media (50em >= width >= 30em) {
  /* … */
}

The range comparisons above are inclusive. To exclude the comparison value, use < and/or >.

@media (30em < width < 50em) {
  /* … */
}

@media (50em > width > 30em) {
  /* … */
}

If you create a media feature query without specifying a value, the nested styles will be used as long as the feature's value is not 0 or none. For example, this CSS will apply to any device with a color screen:

@media (color) {
  /* … */
}

If a feature doesn't apply to the device on which the browser is running, expressions involving that media feature are always false.

For more Media feature examples, please see the reference page for each specific feature.

In the previous example, we saw the and operator used to group a media type with a media feature. The and operator can also combine multiple media features within a single media query. The not operator negates a media query, or a media feature when used with brackets, basically reversing their normal meanings. The or operator can, under certain conditions, be used to combine multiple media features within a single media query. Lastly, the only operator was used to prevent older browsers from applying the styles without evaluating the media feature expressions but it has no effect in modern browsers.

@media (min-width: 30em) and (orientation: landscape) {
  /* … */
}

To limit the styles to devices with a screen, you can chain the media features to the screen media type:

@media screen and (min-width: 30em) and (orientation: landscape) {
  /* … */
}

The following rule contains two media queries. The block's styles will apply if either the user's device has a height of 680px or more or if the browser viewport is in portrait mode (the viewport height is greater than the viewport width):

@media (min-height: 680px), screen and (orientation: portrait) {
  /* … */
}

In this example, if the user is printing to a PDF and the page height is 800px, the media query returns true because the first query component — which tests whether the viewport has a height of 680px or more — is true. Likewise, if a user is on a smartphone in portrait mode with a viewport height of 480px, the media query returns true because the second query component is true.

In a comma-separated list of media queries, the individual media queries end at the comma or, in the case of the last media query in the list, at the opening bracket ({).

@media not print {
  /* … */
}

The not negates only the media query it is applied to. The not, without parenthesis, negates all the features within the media query in which it is contained. This means, in a comma-separated list of media queries, each not applies to the single query it is contained within, applying to all the features within that single query. In this example, the not applies to the first media query, which concludes at the first comma:

@media not screen and (color), print and (color) {
  /* … */
}

The above query is evaluated like this:

@media (not (screen and (color))), print and (color) {
  /* … */
}

Both examples are valid. Media conditions can be grouped by wrapping them in parentheses (()). These groups can then be nested within a condition the same as a single media query.

The not is evaluated last in a media query, meaning it applies to the entire media query, not to a single feature within a query, as if an open parenthesis was added immediately after the not and closed at the end of the media query.

The following query:

@media not all and (monochrome) {
  /* … */
}

is evaluated like this:

@media not (all and (monochrome)) {
  /* … */
}

It is not evaluated like this:

@media (not all) and (monochrome) {
  /* … */
}

To negate a single feature within a media query, use parenthesis. Encompassing a not and a media feature in parentheses limits the components of the query that get negated.

In this example, we negate the hover media feature but not the all media type:

@media all and (not(hover)) {
  /* … */
}

The not(hover) matches if the device has no hover capability. In this case, because of the parentheses, the not applies to hover but not to all.

@media (not (color)) or (hover) {
  /* … */
}

Note that you cannot use the or operator on the same level as the and and not operators. You can either separate the media features with a comma or use parenthesis to group sub-expressions of media features to clarify the order of evaluation.

For example, the following queries are both valid:

@media ((color) and (hover)) or (monochrome) {
  /* … */
}

/* or */
@media (color) and (hover), (monochrome) {
  /* … */
}