A media query is composed of an optionalmedia type and any number ofmedia feature expressions, which may optionally be combined in various ways usinglogical operators.Media queries are case-insensitive.

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

  The type is optional (assumed to beall) except when using theonly logical operator.

• Media features describe a specific characteristic of theuser agent, output device, or environment:

  • any-hover
  • any-pointer
  • aspect-ratio
  • color
  • color-gamut
  • color-index
  • device-aspect-ratioDeprecated
  • device-heightDeprecated
  • device-posture
  • device-widthDeprecated
  • 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, thehover 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, andonly.You can also combine multiple media queries into a single rule by separating them with commas.

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

Media types describe the general category of a given device.Although websites are commonly designed with screens in mind, you may want to create styles that target special devices such as printers or audio-based screen readers.For example, this CSS targets printers:

@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 {  /* … */}

Seemedia 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 justscreen,print, andall remaining. To target more specific attributes, usemedia features instead.

Media features describe the specific characteristics of a givenuser agent, output device, or environment.For instance, you can apply specific styles to widescreen monitors, computers that use mice, or devices that are being used in low-light conditions.This example applies styles when the user'sprimary input mechanism (such as a mouse) can hover over elements:

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

Media features are either range or discrete.

Discrete features take their value from anenumerated set of possible keyword values. For example, the discreteorientation feature accepts eitherlandscape orportrait.

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

Manyrange 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'sviewport 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 inclusivemin- andmax- 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 not0 ornone.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 moreMedia feature examples, please see the reference page for each specific feature.

Sometimes you may want to create a media query that depends on multiple conditions. This is where thelogical operators come in:not,and, andonly.Furthermore, you can combine multiple media queries into a comma-separated list; this allows you to apply the same styles in different situations, with the contained media queries evaluated as a logicalor composition: interpreted as if each media query were within parentheses with anor between them.

In the previous example, we saw theand operator used to group a mediatype with a mediafeature.Theand operator can also combine multiple media features within a single media query.Thenot operator negates a media query, or a media feature when used with brackets, basically reversing their normal meanings.Theor operator can, under certain conditions, be used to combine multiple media features within a single media query.Lastly, theonly 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.

Theand keyword combines a media feature with a media typeor other media features.This example combines two media features to restrict styles to landscape-oriented devices with a width of at least 30 ems:

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

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

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

You can use a comma-separated list of media queries to apply styles when the user's device matches any one of various media types, features, or states.

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 moreor if the browser viewport is in portrait mode (the viewport height is greater than the viewport width):

@media (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 of680px 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 ({).

Thenot keyword inverts the meaning of a single media query. For example, the CSS styles in this media query will apply to everythingexcept printed media:

@media not print {  /* … */}

Thenot negates only the media query it is applied to. Thenot, 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, eachnot applies to the single query it is contained within, applying toall the features within that single query. In this example, thenot applies to the first media queryscreen and (color), which concludes at the first comma:

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

Because the query starts with a media typescreen, youcannot wrapscreen and (color) with parentheses. On the other hand, if your media query consists of features only, then youmust parenthesize the query:

@media not ((width > 1000px) and (color)), print and (color) {  /* … */}

Parentheses limit the components of the query that get negated. For example, to negate the(width > 1000px) query only:

@media (not (width > 1000px)) and (color), print and (color) {  /* … */}

not only negates the query to its right. In this example, we negate thehover media feature but not thescreen media type:

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

Thenot (hover) matches if the device has no hover capability. In this case, because of its ordering, thenot applies tohover but not toscreen.

Theonly keyword prevents older browsers that do not support media queries with media features from applying the given styles.It has no effect on modern browsers.

@media only screen and (color) {  /* … */}

You can useor to test for a match among more than one feature, resolving totrue if any of the features are true.For example, the following query tests for devices that have a monochrome display or hover capability:

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

Note that you cannot use theor operator on the same level as theand andnot 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) {  /* … */}

• @media
• Container queries
• Testing media queries programmatically
• CSS Animations Between Media Queries
• Extended Mozilla media features
• Extended WebKit media features