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. With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.
Note: In JavaScript, the rules created using @media can be accessed with 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.
Description
Media types
Media types describe the general category of a device. Except when using the not or only logical operators, the media type is optional and the all type will be implied.
all- Suitable for all devices.
print- Intended for paged material and documents viewed on a screen in print preview mode. (Please see paged media for information about formatting issues that are specific to these formats.)
screen- Intended primarily for screens.
speech- Intended for speech synthesizers.
Deprecated media types: CSS2.1 and Media Queries 3 defined several additional media types (tty, tv, projection, handheld, braille, embossed, and aural), but they were deprecated in Media Queries 4 and shouldn't be used. The aural type has been replaced by speech, which is similar.
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 |
|---|---|---|
any-hover
|
Does any available 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. |
aspect-ratio
|
Width-to-height aspect ratio of the viewport | |
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 | |
device-aspect-ratio '
|
Width-to-height aspect ratio 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-width '
|
Width of the rendering surface of the output device | Deprecated in Media Queries Level 4. |
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. |
forced-colors
|
Detect whether user agent restricts color palette | Added in Media Queries Level 5. |
grid
|
Does the device use a grid or bitmap screen? | |
height
|
Height of the viewport | |
hover
|
Does the primary input mechanism allow the user to hover over elements? | Added in Media Queries Level 4. |
inverted-colors
|
Is the user agent or underlying OS inverting colors? | Added in Media Queries Level 5. |
monochrome
|
Bits per pixel in the output device's monochrome frame buffer, or zero if the device isn't monochrome | |
orientation
|
Orientation of the viewport | |
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. |
pointer
|
Is the primary input mechanism a pointing device, and if so, how accurate is it? | Added in Media Queries Level 4. |
prefers-color-scheme
|
Detect if the user prefers a light or dark color scheme | 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-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. |
resolution
|
Pixel density of the output device | |
scan
|
Scanning process of the output device | |
scripting
|
Detects whether scripting (i.e. JavaScript) is available | Added in Media Queries Level 5. |
update
|
How frequently the output device can modify the appearance of content | Added in Media Queries Level 4. |
width
|
Width of the viewport including width of scrollbar |
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 em works 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.
Security
Because media queries provide insights into the capabilities—and by extension, the features and design—of the device the user is working with, there is the potential that they could be abused to construct a "fingerprint" which identifies the device, or at least categorizes it to some degree of detail that may be undesirable to users.
Because of this potential, a browser may opt to fudge the returned values in some manner in order to prevent them from being used to precisely identify a computer. A browser might also offer additional measures in this area; for example, if Firefox's "Resist Fingerprinting" setting is enabled, many media queries report default values rather than values representing the actual device state.
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>
Examples
Testing for print and screen media types
@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.
Specifications
| Specification | Comment | Feedback |
|---|---|---|
| Media Queries Level 5The definition of '@media descriptors' in that specification. | Reinstates inverted-colors and Custom Media Queries, which were removed from Level 4.
Adds |
CSS Working Group drafts GitHub issues |
| CSS Conditional Rules Module Level 3The definition of '@media' in that specification. | Defines the basic syntax of the @media rule.
|
CSS Working Group drafts GitHub issues |
| Media Queries Level 4The definition of '@media' in that specification. | Adds scripting, pointer, hover, update, overflow-block, and overflow-inline media features.
Deprecates all media types except for |
CSS Working Group drafts GitHub issues |
| Media QueriesThe definition of '@media' in that specification. | ||
| CSS Level 2 (Revision 1)The definition of '@media' in that specification. | Initial definition. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
@media
|
Chrome
Full support 1 |
Edge
Full support 12 |
Firefox
Full support 1 |
IE
Full support 6 |
Opera
Full support 9.2 |
Safari
Full support 1.3 |
WebView Android
Full support 1 |
Chrome Android
Full support 18 |
Firefox Android
Full support 4 |
Opera Android
Full support 10.1 |
Safari iOS
Full support 1 |
Samsung Internet Android
Full support 1.0 |
any-hover media feature
|
Chrome
Full support 41 |
Edge
Full support 16 |
Firefox
Full support 64 |
IE
No support No |
Opera
Full support 28 |
Safari
Full support 9 |
WebView Android
Full support 41 |
Chrome Android
Full support 41 |
Firefox Android
Full support 64 |
Opera Android
Full support 28 |
Safari iOS
Full support 9 |
Samsung Internet Android
Full support 5.0 |
any-pointer media feature
|
Chrome
Full support 41 |
Edge
Full support 12 |
Firefox
Full support 64 |
IE
No support No |
Opera
Full support 28 |
Safari
Full support 9 |
WebView Android
Full support 41 |
Chrome Android
Full support 41 |
Firefox Android
Full support 64 |
Opera Android
Full support 28 |
Safari iOS
Full support 9 |
Samsung Internet Android
Full support 4.0 |
aspect-ratio media feature
|
Chrome
Full support 3 |
Edge
Full support 12 |
Firefox
Full support 3.5 |
IE
Full support 9 |
Opera
Full support 10 |
Safari
Full support 5 |
WebView Android
Full support ≤37 |
Chrome Android
Full support 18 |
Firefox Android
Full support 4 |
Opera Android
Full support 10.1 |
Safari iOS
Full support 4.2 |
Samsung Internet Android
Full support 1.0 |
calc() expressions
|
Chrome
Full support 66 |
Edge
Full support 79 |
Firefox
Full support 59 |
IE
No support No |
Opera
Full support 53 |
Safari
Full support 12 |
WebView Android
Full support 66 |
Chrome Android
Full support 66 |
Firefox Android
Full support 59 |
Opera Android
Full support 47 |
Safari iOS
Full support 12 |
Samsung Internet Android
Full support 9.0 |
color media feature
|
Chrome
Full support 1 |
Edge
Full support 12 |
Firefox
Full support 2 |
IE
Full support 9 |
Opera
Full support 10 |
Safari
Full support 3 |
WebView Android
Full support ≤37 |
Chrome Android
Full support 18 |
Firefox Android
Full support 4 |
Opera Android
Full support 10.1 |
Safari iOS
Full support 1 |
Samsung Internet Android
Full support 1.0 |
color-gamut media feature
|
Chrome
Full support 58 |
Edge
Full support 79 |
Firefox
No support No |
IE
No support No |
Opera
Full support 45 |
Safari
Full support 10 |
WebView Android
Full support 58 |
Chrome Android
Full support 58 |
Firefox Android
No support No |
Opera Android
Full support 43 |
Safari iOS
Full support 10 |
Samsung Internet Android
Full support 7.0 |
color-index media feature
|
Chrome
Full support 29 |
Edge
Full support 79 |
Firefox
No support No |
IE
No support No |
Opera
Full support 16 |
Safari
Full support 8 |
WebView Android
Full support ≤37 |
Chrome Android
Full support 29 |
Firefox Android
No support No |
Opera Android
Full support 16 |
Safari iOS
Full support 8 |
Samsung Internet Android
Full support 2.0 |
| Chrome
Full support 1 |
Edge
Full support 12 |
Firefox
Full support 2 |
IE
Full support 9 |
Opera
Full support 10 |
Safari
Full support 3 |
WebView Android
Full support ≤37 |
Chrome Android
Full support 18 |
Firefox Android
Full support 4 |
Opera Android
Full support 10.1 |
Safari iOS
Full support 1 |
Samsung Internet Android
Full support 1.0 | |
| Chrome
Full support 1 |
Edge
Full support 12 |
Firefox
Full support 2 |
IE
Full support 9 |
Opera
Full support 10 |
Safari
Full support 3 |
WebView Android
Full support ≤37 |
Chrome Android
Full support 18 |
Firefox Android
Full support 4 |
Opera Android
Full support 10.1 |
Safari iOS
Full support 1 |
Samsung Internet Android
Full support 1.0 | |
| Chrome
Full support 1 |
Edge
Full support 12 |
Firefox
Full support 2 |
IE
Full support 9 |
Opera
Full support 10 |
Safari
Full support 3 |
WebView Android
Full support ≤37 |
Chrome Android
Full support 18 |
Firefox Android
Full support 4 |
Opera Android
Full support 10.1 |
Safari iOS
Full support 1 |
Samsung Internet Android
Full support 1.0 | |
display-mode media feature
|
Chrome
Full support 45 |
Edge
Full support 79 |
Firefox Full support 47 Full support 47 Notes' Firefox 47 and later support |
IE
No support No |
Opera
Full support 32 |
Safari
Full support 13 |
WebView Android
Full support 45 |
Chrome Android
Full support 45 |
Firefox Android Full support 47 Full support 47 Notes' Firefox 47 and later support |
Opera Android
Full support 32 |
Safari iOS
Full support 13 |
Samsung Internet Android
Full support 5.0 |
|
Chrome Full support 79 Full support 79 Notes' See bug 970285.
Disabled' From version 79: this feature is behind the |
Edge
Full support 79 |
Firefox Full support 81 Full support 81 Disabled' From version 81: this feature is behind the |
IE
No support No |
Opera
No support No |
Safari
No support No |
WebView Android No support No No support No Notes' See bug 970285. |
Chrome Android No support No No support No Notes' See bug 970285. |
Firefox Android
No support No |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android No support No No support No Notes' See bug 970285. | |
grid media feature
|
Chrome
Full support 1 |
Edge
Full support 12 |
Firefox
Full support 2 |
IE
Full support 10 |
Opera
Full support 10 |
Safari
Full support 3 |
WebView Android
Full support ≤37 |
Chrome Android
Full support 18 |
Firefox Android
Full support 4 |
Opera Android
Full support 10.1 |
Safari iOS
Full support 1 |
Samsung Internet Android
Full support 1.0 |
height media feature
|
Chrome
Full support 1 |
Edge
Full support 12 |
Firefox
Full support 2 |
IE
Full support 9 |
Opera
Full support 10 |
Safari
Full support 3 |
WebView Android
Full support ≤37 |
Chrome Android
Full support 18 |
Firefox Android
Full support 4 |
Opera Android
Full support 10.1 |
Safari iOS
Full support 1 |
Samsung Internet Android
Full support 1.0 |
hover media feature
|
Chrome Full support 38 Full support 38 Notes' Before Chrome 41, the implementation was buggy and reported |
Edge
Full support 12 |
Firefox
Full support 64 |
IE
No support No |
Opera
Full support 28 |
Safari
Full support 9 |
WebView Android Full support 38 Full support 38 Notes' Before Chrome 41, the implementation was buggy and reported |
Chrome Android
Full support 50 |
Firefox Android
Full support 64 |
Opera Android
Full support 28 |
Safari iOS
Full support 9 |
Samsung Internet Android
Full support 5.0 |
inverted-colors media feature
|
Chrome
No support No |
Edge
No support No |
Firefox
No support No |
IE
No support No |
Opera
No support No |
Safari
Full support 9.1 |
WebView Android
No support No |
Chrome Android
No support No |
Firefox Android
No support No |
Opera Android
No support No |
Safari iOS
Full support 10 |
Samsung Internet Android
No support No |
| Media feature expressions | Chrome
Full support 1 |
Edge
Full support 12 |
Firefox
Full support 1 |
IE
Full support 9 |
Opera
Full support 9.2 |
Safari
Full support 1.3 |
WebView Android
Full support 1 |
Chrome Android
Full support 18 |
Firefox Android
Full support 4 |
Opera Android
Full support 10.1 |
Safari iOS
Full support 3.1 |
Samsung Internet Android
Full support 1.0 |
| Media query value support | Chrome
Full support 66 |
Edge
Full support 79 |
Firefox
Full support 59 |
IE
No support No |
Opera
Full support 53 |
Safari
No support No |
WebView Android
Full support 66 |
Chrome Android
Full support 66 |
Firefox Android
Full support 59 |
Opera Android
Full support 47 |
Safari iOS
No support No |
Samsung Internet Android
Full support 9.0 |
monochrome media feature
|
Chrome
Full support 1 |
Edge
Full support 79 |
Firefox
Full support 2 |
IE
No support No |
Opera
Full support 10 |
Safari
Full support 3 |
WebView Android
Full support ≤37 |
Chrome Android
Full support 18 |
Firefox Android
Full support 4 |
Opera Android
Full support 10.1 |
Safari iOS
Full support 1 |
Samsung Internet Android
Full support 1.0 |
| Nested media queries | Chrome
Full support 26 |
Edge
Full support 12 |
Firefox
Full support 11 |
IE
No support No |
Opera
Full support 12.1 |
Safari
Full support 6.1 |
WebView Android
Full support ≤37 |
Chrome Android
Full support 26 |
Firefox Android
Full support 14 |
Opera Android
Full support 12.1 |
Safari iOS
Full support 7 |
Samsung Internet Android
Full support 1.5 |
orientation media feature
|
Chrome
Full support 3 |
Edge
Full support 12 |
Firefox
Full support 2 |
IE
Full support 9 |
Opera
Full support 10.6 |
Safari
Full support 5 |
WebView Android
Full support ≤37 |
Chrome Android
Full support 18 |
Firefox Android
Full support 4 |
Opera Android
Full support 11 |
Safari iOS
Full support 4.2 |
Samsung Internet Android
Full support 1.0 |
overflow-block media feature
|
Chrome
No support No |
Edge
No support No |
Firefox
Full support 66 |
IE
No support No |
Opera
No support No |
Safari
No support No |
WebView Android
No support No |
Chrome Android
No support No |
Firefox Android
Full support 66 |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android
No support No |
overflow-inline media feature
|
Chrome
No support No |
Edge
No support No |
Firefox
Full support 66 |
IE
No support No |
Opera
No support No |
Safari
No support No |
WebView Android
No support No |
Chrome Android
No support No |
Firefox Android
Full support 66 |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android
No support No |
pointer media feature
|
Chrome
Full support 41 |
Edge
Full support 12 |
Firefox
Full support 64 |
IE
No support No |
Opera
Full support 28 |
Safari
Full support 9 |
WebView Android
Full support 41 |
Chrome Android
Full support 50 |
Firefox Android
Full support 64 |
Opera Android
Full support 28 |
Safari iOS
Full support 9 |
Samsung Internet Android
Full support 5.0 |
prefers-color-scheme media feature
|
Chrome
Full support 76 |
Edge
Full support 79 |
Firefox
Full support 67 |
IE
No support No |
Opera
Full support 62 |
Safari
Full support 12.1 |
WebView Android
Full support 76 |
Chrome Android
Full support 76 |
Firefox Android
No support No |
Opera Android
Full support 54 |
Safari iOS
Full support 13 |
Samsung Internet Android
Full support 12.0 |
| Chrome
No support No |
Edge
No support No |
Firefox Full support 80 Full support 80 Disabled' From version 80: this feature is behind the |
IE
No support No |
Opera
No support No |
Safari
No support No |
WebView Android
No support No |
Chrome Android
No support No |
Firefox Android
No support No |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android
No support No | |
|
Chrome Full support 85 Full support 85 Notes' See bug 1051189.
Disabled' From version 85: this feature is behind the |
Edge Full support 85 Full support 85 Notes' See bug 1051189.
Disabled' From version 85: this feature is behind the |
Firefox
No support No |
IE
No support No |
Opera
No support No |
Safari
No support No |
WebView Android No support No No support No Notes' See bug 1051189. |
Chrome Android Full support 85 Full support 85 Notes' See bug 1051189.
Disabled' From version 85: this feature is behind the |
Firefox Android
No support No |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android
No support No | |
prefers-reduced-motion media feature
|
Chrome
Full support 74 |
Edge
Full support 79 |
Firefox
Full support 63 |
IE
No support No |
Opera
Full support 62 |
Safari
Full support 10.1 |
WebView Android
Full support 74 |
Chrome Android
Full support 74 |
Firefox Android
Full support 64 |
Opera Android
Full support 53 |
Safari iOS
Full support 10.3 |
Samsung Internet Android
Full support 11.0 |
| Chrome
No support No |
Edge
No support No |
Firefox
No support No |
IE
No support No |
Opera
No support No |
Safari
No support No |
WebView Android
No support No |
Chrome Android
No support No |
Firefox Android
No support No |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android
No support No | |
resolution media feature
|
Chrome
Full support 29 |
Edge
Full support 12 |
Firefox Full support 8 |
IE
Full support 9 |
Opera Full support 16 Full support 16 No support 10 — 15 |
Safari No support No No support No Notes' See bug 78087. |
WebView Android
Full support ≤37 |
Chrome Android
Full support 29 |
Firefox Android Full support 8 |
Opera Android Full support 16 Full support 16 No support 10.1 — 14 |
Safari iOS No support No No support No Notes' See bug 78087. |
Samsung Internet Android
Full support 2.0 |
scan media feature
|
Chrome
No support No |
Edge
No support No |
Firefox
No support No |
IE
No support No |
Opera
No support No |
Safari
No support No |
WebView Android
No support No |
Chrome Android
No support No |
Firefox Android
No support No |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android
No support No |
scripting media feature
|
Chrome No support No No support No Notes' See bug 489957. |
Edge No support No No support No Notes' See bug 489957. |
Firefox No support No No support No Notes' See bug 1166581. |
IE
No support No |
Opera
No support No |
Safari
No support No |
WebView Android No support No No support No Notes' See bug 489957. |
Chrome Android No support No No support No Notes' See bug 489957. |
Firefox Android No support No No support No Notes' See bug 1166581. |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android No support No No support No Notes' See bug 489957. |
speech media type
|
Chrome
No support No |
Edge
No support No |
Firefox
No support No |
IE
No support No |
Opera
Full support 9.2 |
Safari
No support No |
WebView Android
No support No |
Chrome Android
No support No |
Firefox Android
No support No |
Opera Android
Full support 10.1 |
Safari iOS
No support No |
Samsung Internet Android
No support No |
update media feature
|
Chrome
No support No |
Edge
No support No |
Firefox
No support No |
IE
No support No |
Opera
No support No |
Safari
No support No |
WebView Android
No support No |
Chrome Android
No support No |
Firefox Android
No support No |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android
No support No |
width media feature
|
Chrome
Full support 1 |
Edge
Full support 12 |
Firefox
Full support 2 |
IE
Full support 9 |
Opera
Full support 10 |
Safari
Full support 3 |
WebView Android
Full support ≤37 |
Chrome Android
Full support 18 |
Firefox Android
Full support 4 |
Opera Android
Full support 10.1 |
Safari iOS
Full support 1 |
Samsung Internet Android
Full support 1.0 |
| Chrome
No support No |
Edge
No support No |
Firefox
Full support 4 |
IE
No support No |
Opera
No support No |
Safari
No support No |
WebView Android
No support No |
Chrome Android
No support No |
Firefox Android
Full support 4 |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android
No support No | |
| Chrome
No support 2 — 36 |
Edge
No support No |
Firefox
No support No |
IE
No support No |
Opera
No support 15 — 23 |
Safari
Full support 4 |
WebView Android
No support ≤37 — ≤37 |
Chrome Android
No support 18 — 36 |
Firefox Android
No support No |
Opera Android
No support 14 — 24 |
Safari iOS
Full support 3.2 |
Samsung Internet Android
No support 1.0 — 3.0 | |
| Chrome
Full support 1 |
Edge
Full support 12 |
Firefox Full support 63 Full support 63 Notes' Implemented as an alias for for Notes' Implemented as an alias for for Notes' Implemented as an alias for for |
IE
No support No |
Opera
Full support 15 |
Safari
Full support 3 |
WebView Android
Full support ≤37 |
Chrome Android
Full support 18 |
Firefox Android Full support 63 Full support 63 Notes' Implemented as an alias for for Notes' Implemented as an alias for for Notes' Implemented as an alias for for |
Opera Android
Full support 14 |
Safari iOS
Full support 1 |
Samsung Internet Android
Full support 1.0 | |
| Chrome
Full support 1 |
Edge
Full support 12 |
Firefox Full support 63 Full support 63 Notes' Implemented as an alias for for Notes' Implemented as an alias for for Notes' Implemented as an alias for for |
IE
No support No |
Opera
Full support 15 |
Safari
Full support 3 |
WebView Android
Full support ≤37 |
Chrome Android
Full support 18 |
Firefox Android Full support 63 Full support 63 Notes' Implemented as an alias for for Notes' Implemented as an alias for for Notes' Implemented as an alias for for |
Opera Android
Full support 14 |
Safari iOS
Full support 1 |
Samsung Internet Android
Full support 1.0 | |
| Chrome
Full support 1 |
Edge
Full support 12 |
Firefox Full support 63 Full support 63 Notes' Implemented as an alias for for Notes' Implemented as an alias for for Notes' Implemented as an alias for for |
IE
No support No |
Opera
Full support 15 |
Safari
Full support 3 |
WebView Android
Full support ≤37 |
Chrome Android
Full support 18 |
Firefox Android Full support 63 Full support 63 Notes' Implemented as an alias for for Notes' Implemented as an alias for for Notes' Implemented as an alias for for |
Opera Android
Full support 14 |
Safari iOS
Full support 1 |
Samsung Internet Android
Full support 1.0 | |
| Chrome
No support 2 — 36 |
Edge
No support No |
Firefox
No support No |
IE
No support No |
Opera
No support 15 — 23 |
Safari
Full support 4 |
WebView Android
No support ≤37 — ≤37 |
Chrome Android
No support 18 — 36 |
Firefox Android
No support No |
Opera Android
No support 14 — 24 |
Safari iOS
Full support 3.2 |
Samsung Internet Android
No support 1.0 — 3.0 | |
| Chrome
No support 2 — 36 |
Edge
No support 12 — 79 |
Firefox Full support 49 Full support 49 Full support 46 Disabled' From version 46: this feature is behind the |
IE
No support No |
Opera
No support 15 — 23 |
Safari
Full support 4 |
WebView Android
No support ≤37 — ≤37 |
Chrome Android
No support 18 — 36 |
Firefox Android Full support 49 Full support 49 Full support 46 Disabled' From version 46: this feature is behind the |
Opera Android
No support 14 — 24 |
Safari iOS
Full support 3.2 |
Samsung Internet Android
No support 1.0 — 3.0 | |
| Chrome
No support 2 — 36 |
Edge
No support No |
Firefox
No support No |
IE
No support No |
Opera
No support 15 — 23 |
Safari
Full support 4 |
WebView Android
No support ≤37 — ≤37 |
Chrome Android
No support 18 — 36 |
Firefox Android
No support No |
Opera Android
No support 14 — 24 |
Safari iOS
Full support 3.2 |
Samsung Internet Android
No support 1.0 — 3.0 |
Legend
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.'
- Experimental. Expect behavior to change in the future.
- Non-standard. Expect poor cross-browser support.'
- Non-standard. Expect poor cross-browser support.
- Deprecated. Not for use in new websites.'
- Deprecated. Not for use in new websites.
- See implementation notes.'
- See implementation notes.
- User must explicitly enable this feature.'
- User must explicitly enable this feature.
See also
- Using media queries
- In JavaScript,
@mediacan be accessed via the CSS object model interfaceCSSMediaRule. - Extended Mozilla media features
- Extended WebKit media features
@media by Mozilla Contributors is licensed under CC-BY-SA 2.5.
