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.
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.
@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 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. |
@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.
To best accommodate people who adjust a site's text size, use em
s when you need a <length>
for your media queries.
Both em
and px
are valid units, but em
s 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.
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 |
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. |
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
|
? | ? | ? |
grid media feature |
Yes | ? | Yes | ? | Yes | Yes |
height media feature |
? | ? | ? | 9 | ? | ? |
inverted-colors media feature
|
No | ? | No | No | No | Yes |
hover media feature |
38
|
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
|
? | ? | ? |
overflow-inline media feature
|
No | ? | No
|
? | ? | ? |
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
|
? | Yes | ? |
scan media feature |
No | ? | No | No | No | No |
scripting media feature
|
No
|
? | No
|
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
|
No | Yes | ? |
-webkit-max-device-pixel-ratio media feature
|
Yes | ? | 49
|
No | Yes | ? |
-webkit-min-device-pixel-ratio media feature
|
Yes | ? | 63
|
No | Yes | ? |
-webkit-transform-2d media feature
|
No | No | No | No | Yes | 1 |
-webkit-transform-3d media feature
|
Yes | ? | 49
|
? | 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
|
? | ? | ? |
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
|
? | ? | ? |
overflow-inline media feature
|
? | No | ? | No
|
? | ? | ? |
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
|
? | No
|
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
|
? | ? | ? | ? | ? | ? | ? |
@media
can be accessed via the CSS object model interface CSSMediaRule
.
© 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