W3cubDocs

/CSS

interactive

The @media CSS at-rule can be used to apply part of a style sheet based on the result of one or more media queries.

Note: In JavaScript, @media can be accessed via the CSSMediaRule CSS object model interface.

Syntax

The @media at-rule may be placed at the top level of your code or nested inside any other conditional group at-rule.

/* At the top level of your code */
@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

/* Nested within another conditional at-rule */
@supports (display: flex) {
  @media screen and (min-width: 900px) {
    article {
      display: flex;
    }
  }
}

For a discussion of media query syntax, please see Using media queries.

Formal syntax

@media <media-query-list> {
  <group-rule-body>
}

where
<media-query-list> = <media-query>#

where
<media-query> = <media-condition> | [ not | only ]? <media-type> [ and <media-condition-without-or> ]?

where
<media-condition> = <media-not> | <media-and> | <media-or> | <media-in-parens>
<media-type> = <ident>
<media-condition-without-or> = <media-not> | <media-and> | <media-in-parens>

where
<media-not> = not <media-in-parens>
<media-and> = <media-in-parens> [ and <media-in-parens> ]+
<media-or> = <media-in-parens> [ or <media-in-parens> ]+
<media-in-parens> = ( <media-condition> ) | <media-feature> | <general-enclosed>

where
<media-feature> = ( [ <mf-plain> | <mf-boolean> | <mf-range> ] )
<general-enclosed> = [ <function-token> <any-value> ) ] | ( <ident> <any-value> )

where
<mf-plain> = <mf-name> : <mf-value>
<mf-boolean> = <mf-name>
<mf-range> = <mf-name> [ '<' | '>' ]? '='? <mf-value> | <mf-value> [ '<' | '>' ]? '='? <mf-name> | <mf-value> '<' '='? <mf-name> '<' '='? <mf-value> | <mf-value> '>' '='? <mf-name> '>' '='? <mf-value>

where
<mf-name> = <ident>
<mf-value> = <number> | <dimension> | <ident> | <ratio>

Media features

Media features describe specific characteristics of the user agent, output device, or environment. Media feature expressions test for their presence or value, and are entirely optional. Each media feature expression must be surrounded by parentheses.

Name Summary Notes
width Width of the viewport
height Height of the viewport
aspect-ratio Width-to-height aspect ratio of the viewport
orientation Orientation of the viewport
resolution Pixel density of the output device
scan Scanning process of the output device
grid Does the device use a grid or bitmap screen?
update How frequently the output device can modify the appearance of content Added in Media Queries Level 4.
overflow-block How does the output device handle content that overflows the viewport along the block axis? Added in Media Queries Level 4.
overflow-inline Can content that overflows the viewport along the inline axis be scrolled? Added in Media Queries Level 4.
color Number of bits per color component of the output device, or zero if the device isn't color
color-gamut Approximate range of colors that are supported by the user agent and output device Added in Media Queries Level 4.
color-index Number of entries in the output device's color lookup table, or zero if the device does not use such a table
display-mode The display mode of the application, as specified in the web app manifest's display member Defined in the Web App Manifest spec.
monochrome Bits per pixel in the output device's monochrome frame buffer, or zero if the device isn't monochrome
inverted-colors Is the user agent or underlying OS inverting colors? Added in Media Queries Level 5.
pointer Is the primary input mechanism a pointing device, and if so, how accurate is it? Added in Media Queries Level 4.
hover Does the primary input mechanism allow the user to hover over elements? Added in Media Queries Level 4.
any-pointer Is any available input mechanism a pointing device, and if so, how accurate is it? Added in Media Queries Level 4.
any-hover Does any available input mechanism allow the user to hover over elements? Added in Media Queries Level 4.
light-level Light level of the environment Added in Media Queries Level 5.
prefers-reduced-motion The user prefers less motion on the page Added in Media Queries Level 5.
prefers-reduced-transparency The user prefers reduced transparency Added in Media Queries Level 5.
prefers-contrast Detects if the user has requested the system increase or decrease the amount of contrast between adjacent colors Added in Media Queries Level 5.
prefers-color-scheme Detect if the user prefers a light or dark color scheme Added in Media Queries Level 5.
scripting Detects whether scripting (i.e. JavaScript) is available Added in Media Queries Level 5.
device-width Width of the rendering surface of the output device Deprecated in Media Queries Level 4.
device-height Height of the rendering surface of the output device Deprecated in Media Queries Level 4.
device-aspect-ratio Width-to-height aspect ratio of the output device Deprecated in Media Queries Level 4.

Examples

@media print {
  body { font-size: 10pt; }
}

@media screen {
  body { font-size: 13px; }
}

@media screen, print {
  body { line-height: 1.2; }
}

@media only screen 
  and (min-width: 320px) 
  and (max-width: 480px)
  and (resolution: 150dpi) {
    body { line-height: 1.4; }
}

Introduced in Media Queries Level 4 is a new range syntax that allows for less verbose media queries when testing for any feature accepting a range, as shown in the below examples:

@media (height > 600px) {
    body { line-height: 1.4; }
}

@media (400px <= width <= 700px) {
    body { line-height: 1.4; }
}

For more examples, please see Using media queries.

Accessibility concerns

To best accommodate people who adjust a site's text size, use ems when you need a <length> for your media queries.

Both em and px are valid units, but ems work better if the user changes the browser text size.

Also consider using Level 4 media queries to improve the user's experience. For example, prefers-reduced-motion to detect if the user has requested that the system minimize the amount of animation or motion it uses.

Specifications

Specification Status Comment
Media Queries Level 5
The definition of '@media' in that specification.
Editor's Draft Reinstates light-level, inverted-colors and Custom Media Queries, which were removed from Level 4.
Adds prefers-reduced-motion, prefers-reduced-transparency, prefers-contrast, and prefers-color-scheme media features.
CSS Conditional Rules Module Level 3
The definition of '@media' in that specification.
Candidate Recommendation Defines the basic syntax of the @media rule.
Media Queries Level 4
The definition of '@media' in that specification.
Candidate Recommendation

Adds scripting, pointer, hover, update, overflow-block, and overflow-inline media features.
Deprecates all media types except for screen, print, speech, and all.
Makes the syntax more flexible by adding, among other things, the or keyword.

Media Queries
The definition of '@media' in that specification.
Recommendation No change.
CSS Level 2 (Revision 1)
The definition of '@media' in that specification.
Recommendation Initial definition.

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
Basic support 1 Yes 1 6 9.2 1.3
speech media type No No No No 9.2 No
Media feature expressions 1 Yes 1 9 9.2 1.3
any-hover media feature 41 16 64 No 28 9
any-pointer media feature 41 12 64 No 28 9
aspect-ratio media feature 4 ? 3.5 9 53 Yes
color media feature Yes ? Yes ? Yes Yes
color-gamut media feature 58 ? No No 45 Yes
color-index media feature Yes ? No No ? ?
device-aspect-ratio media feature Yes ? Yes ? ? ?
device-height media feature Yes ? Yes ? ? ?
device-width media feature Yes ? Yes ? ? ?
display-mode media feature 46 No 47
47
Firefox 47 and later support display-mode values fullscreen and browser. Firefox 57 added support for minimal-ui and standalone values.
? ? ?
grid media feature Yes ? Yes ? Yes Yes
height media feature ? ? ? 9 ? ?
inverted-colors media feature No ? No No No Yes
hover media feature 38
38
Before Chrome 41, the implementation was buggy and reported (hover: none) on non-touch-based computers with a mouse/trackpad. See bug 441613.
12 64 No 28 9
light-level media feature No ? No No No No
monochrome media feature Yes ? Yes No Yes Yes
orientation media feature Yes ? Yes ? Yes Yes
overflow-block media feature No ? No
No
See bug 1422235.
? ? ?
overflow-inline media feature No ? No
No
See bug 1422235.
? ? ?
pointer media feature 41 12 64 ? 28 9
prefers-reduced-motion media feature No No 63 No No 10.1
resolution media feature 29 ? 8
8
3.5
Supports <integer> values only.
? Yes ?
scan media feature No ? No No No No
scripting media feature No
No
See bug 489957.
? No
No
See bug 1166581.
No No No
update media feature No ? No No No No
width media feature Yes ? Yes 9 Yes Yes
-moz-device-pixel-ratio media feature No ? 4 ? ? ?
-webkit-animation media feature Yes ? ? ? ? ?
-webkit-device-pixel-ratio media feature Yes ? 49
Disabled
49
Disabled
Implemented as an alias for for -moz-device-pixel-ratio.
Disabled From version 49: this feature is behind the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
45
Disabled
Implemented as an alias for for -moz-device-pixel-ratio.
Disabled From version 45: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true) and the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No Yes ?
-webkit-max-device-pixel-ratio media feature Yes ? 49
Disabled
49
Disabled
Implemented as an alias for for max--moz-device-pixel-ratio.
Disabled From version 49: this feature is behind the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
45
Disabled
Implemented as an alias for for max--moz-device-pixel-ratio.
Disabled From version 45: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true) and the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No Yes ?
-webkit-min-device-pixel-ratio media feature Yes ? 63
63
Implemented as an alias for for -moz-device-pixel-ratio.
49
Disabled
Implemented as an alias for for min--moz-device-pixel-ratio.
Disabled From version 49: this feature is behind the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
45
Disabled
Implemented as an alias for for min--moz-device-pixel-ratio.
Disabled From version 45: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true) and the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No Yes ?
-webkit-transform-2d media feature No No No No Yes 1
-webkit-transform-3d media feature Yes ? 49
49
46
Disabled
Disabled From version 46: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
? Yes 1
-webkit-transition media feature No ? No ? Yes 1
Mobile
Android webview Chrome for Android Edge Mobile Firefox for Android Opera for Android iOS Safari Samsung Internet
Basic support 1 ? Yes 4 9 3.1 ?
speech media type No ? No No 9 No No
Media feature expressions 1 ? Yes 4 9 3.1 ?
any-hover media feature 41 41 16 64 28 9.2 5.0
any-pointer media feature 41 41 12 64 28 9.2 ?
aspect-ratio media feature Yes ? ? ? ? No Yes
color media feature ? ? ? ? ? ? ?
color-gamut media feature ? 58 ? No 45 ? ?
color-index media feature ? ? ? ? ? ? ?
device-aspect-ratio media feature ? Yes ? Yes ? ? ?
device-height media feature ? Yes ? Yes ? ? ?
device-width media feature ? Yes ? Yes ? ? ?
display-mode media feature ? 46 No 47
47
Firefox 47 and later support display-mode values fullscreen and browser. Firefox 57 added support for minimal-ui and standalone values.
? ? ?
grid media feature ? ? ? ? ? ? ?
height media feature ? ? ? ? ? ? ?
inverted-colors media feature ? No ? No No Yes ?
hover media feature ? 50 12 64 28 9.2 ?
light-level media feature No No ? No No No ?
monochrome media feature ? ? ? ? ? ? ?
orientation media feature Yes ? ? ? ? ? ?
overflow-block media feature ? No ? No
No
See bug 1422235.
? ? ?
overflow-inline media feature ? No ? No
No
See bug 1422235.
? ? ?
pointer media feature ? 50 12 64 28 9.2 ?
prefers-reduced-motion media feature No No No No No 10.3 ?
resolution media feature ? ? ? ? ? ? ?
scan media feature ? ? ? No ? ? ?
scripting media feature No
No
See bug 489957.
No
No
See bug 489957.
? No
No
See bug 1166581.
No No ?
update media feature ? ? ? ? ? ? ?
width media feature ? ? ? ? ? ? ?
-moz-device-pixel-ratio media feature ? ? ? ? ? ? ?
-webkit-animation media feature ? ? ? ? ? ? ?
-webkit-device-pixel-ratio media feature ? ? ? ? ? ? ?
-webkit-max-device-pixel-ratio media feature ? ? ? ? ? ? ?
-webkit-min-device-pixel-ratio media feature ? ? ? ? ? ? ?
-webkit-transform-2d media feature ? ? No No ? ? ?
-webkit-transform-3d media feature ? ? ? ? ? ? ?
-webkit-transition media feature ? ? ? ? ? ? ?

See also

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/interactive