Media queries let you adapt your site or app depending on the presence or value of various device characteristics and parameters.

They are a key component of responsive design. For example, a media query can shrink the font size on small devices, increase the padding between paragraphs when a page is viewed in portrait mode, or bump up the size of buttons on touchscreens.

In CSS, use the @media at-rule to conditionally apply part of a style sheet based on the result of a media query. Use @import to conditionally apply an entire style sheet.

Media queries in HTML

In HTML, media queries can be applied to various elements:

  • In the <link> element's media attribute, they define the media to which a linked resource (typically CSS) should be applied.
  • In the <source> element's media attribute, they define the media to which that source should be applied. (This is only valid inside <picture> elements.)
  • In the <style> element's media attribute, they define the media to which the style should be applied.

Media queries in JavaScript

In JavaScript, you can use the Window.matchMedia() method to test the window against a media query. You can also use MediaQueryList.addListener() to be notified whenever the state of a query changes. With this functionality, your site or app can respond to changes in the device configuration, orientation, or state.

You can learn more about programmatically using media queries in Testing media queries.

Reference

At-rules

Guides

Using media queries
Introduces media queries, their syntax, and the operators and media features which are used to construct media query expressions.
Testing media queries programmatically
Describes how to use media queries in your JavaScript code to determine the state of a device, and to set up listeners that notify your code when the results of media queries change (such as when the user rotates the screen or resizes the browser).
Using Media Queries for Accessibility
Learn how Media Queries can help users understand your website better.

Specifications

Specification Status Comment
Unknown Unknown  
CSS Conditional Rules Module Level 3 Candidate Recommendation  
Media Queries Level 4 Candidate Recommendation  
Media Queries Recommendation  
CSS Level 2 (Revision 1) Recommendation Initial definition

Browser compatibility

@media rule

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 1Edge Full support YesFirefox Full support 1IE Full support 6Opera Full support 9.2Safari Full support 1.3WebView Android Full support 1Chrome Android ? Edge Mobile Full support YesFirefox Android Full support 4Opera Android Full support 9Safari iOS Full support 3.1Samsung Internet Android ?
speech media typeChrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera Full support 9.2Safari No support NoWebView Android No support NoChrome Android ? Edge Mobile No support NoFirefox Android No support NoOpera Android Full support 9Safari iOS No support NoSamsung Internet Android No support No
Media feature expressionsChrome Full support 1Edge Full support YesFirefox Full support 1IE Full support 9Opera Full support 9.2Safari Full support 1.3WebView Android Full support 1Chrome Android ? Edge Mobile Full support YesFirefox Android Full support 4Opera Android Full support 9Safari iOS Full support 3.1Samsung Internet Android ?
any-hover media featureChrome Full support 41Edge Full support 16Firefox No support No
Notes
No support No
Notes
Notes See bug 1035774.
IE No support NoOpera Full support 28Safari Full support 9WebView Android Full support 41Chrome Android Full support 41Edge Mobile Full support 16Firefox Android No support No
Notes
No support No
Notes
Notes See bug 1035774.
Opera Android Full support 28Safari iOS Full support 9.2Samsung Internet Android Full support 5.0
any-pointer media featureChrome Full support 41Edge Full support 12Firefox No support No
Notes
No support No
Notes
Notes See bug 1035774.
IE No support NoOpera Full support 28Safari Full support 9WebView Android Full support 41Chrome Android Full support 41Edge Mobile Full support 12Firefox Android No support No
Notes
No support No
Notes
Notes See bug 1035774.
Opera Android Full support 28Safari iOS Full support 9.2Samsung Internet Android ?
aspect-ratio media featureChrome Full support 4Edge ? Firefox Full support 3.5IE Full support 9Opera Full support 53Safari Full support YesWebView Android Full support YesChrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS No support NoSamsung Internet Android Full support Yes
color media featureChrome Full support YesEdge ? Firefox Full support YesIE ? Opera Full support YesSafari Full support YesWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
color-gamut media featureChrome Full support 58Edge ? Firefox No support NoIE No support NoOpera Full support 45Safari Full support YesWebView Android ? Chrome Android Full support 58Edge Mobile ? Firefox Android No support NoOpera Android Full support 45Safari iOS ? Samsung Internet Android ?
color-index media feature
DeprecatedNon-standard
Chrome Full support YesEdge ? Firefox No support NoIE No support NoOpera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
device-aspect-ratio media feature
DeprecatedNon-standard
Chrome Full support YesEdge ? Firefox Full support YesIE ? Opera ? Safari ? WebView Android ? Chrome Android Full support YesEdge Mobile ? Firefox Android Full support YesOpera Android ? Safari iOS ? Samsung Internet Android ?
device-height media feature
DeprecatedNon-standard
Chrome Full support YesEdge ? Firefox Full support YesIE ? Opera ? Safari ? WebView Android ? Chrome Android Full support YesEdge Mobile ? Firefox Android Full support YesOpera Android ? Safari iOS ? Samsung Internet Android ?
device-width media featureChrome Full support YesEdge ? Firefox Full support YesIE ? Opera ? Safari ? WebView Android ? Chrome Android Full support YesEdge Mobile ? Firefox Android Full support YesOpera Android ? Safari iOS ? Samsung Internet Android ?
display-mode media featureChrome Full support 46Edge No support NoFirefox Full support 47
Notes
Full support 47
Notes
Notes Firefox 47 and later support display-mode values fullscreen and browser. Firefox 57 added support for minimal-ui and standalone values.
IE ? Opera ? Safari ? WebView Android ? Chrome Android Full support 46Edge Mobile No support NoFirefox Android Full support 47
Notes
Full support 47
Notes
Notes Firefox 47 and later support display-mode values fullscreen and browser. Firefox 57 added support for minimal-ui and standalone values.
Opera Android ? Safari iOS ? Samsung Internet Android ?
grid media featureChrome Full support YesEdge ? Firefox Full support YesIE ? Opera Full support YesSafari Full support YesWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
height media featureChrome ? Edge ? Firefox ? IE Full support 9Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
inverted-colors media feature
ExperimentalNon-standard
Chrome No support NoEdge ? Firefox No support NoIE No support NoOpera No support NoSafari Full support YesWebView Android ? Chrome Android No support NoEdge Mobile ? Firefox Android No support NoOpera Android No support NoSafari iOS Full support YesSamsung Internet Android ?
hover media featureChrome Full support 38
Notes
Full support 38
Notes
Notes Before Chrome 41, the implementation was buggy and reported (hover: none) on non-touch-based computers with a mouse/trackpad. See bug 441613.
Edge Full support 12Firefox Full support 64IE No support NoOpera Full support 28Safari Full support 9WebView Android ? Chrome Android Full support 50Edge Mobile Full support 12Firefox Android Full support 64Opera Android Full support 28Safari iOS Full support 9.2Samsung Internet Android ?
light-level media feature
ExperimentalNon-standard
Chrome No support NoEdge ? Firefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile ? Firefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android ?
monochrome media featureChrome Full support YesEdge ? Firefox Full support YesIE No support NoOpera Full support YesSafari Full support YesWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
orientation media featureChrome Full support YesEdge ? Firefox Full support YesIE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
overflow-block media feature
ExperimentalNon-standard
Chrome No support NoEdge ? Firefox No support No
Notes
No support No
Notes
Notes See bug 1422235.
IE ? Opera ? Safari ? WebView Android ? Chrome Android No support NoEdge Mobile ? Firefox Android No support No
Notes
No support No
Notes
Notes See bug 1422235.
Opera Android ? Safari iOS ? Samsung Internet Android ?
overflow-inline media feature
ExperimentalNon-standard
Chrome No support NoEdge ? Firefox No support No
Notes
No support No
Notes
Notes See bug 1422235.
IE ? Opera ? Safari ? WebView Android ? Chrome Android No support NoEdge Mobile ? Firefox Android No support No
Notes
No support No
Notes
Notes See bug 1422235.
Opera Android ? Safari iOS ? Samsung Internet Android ?
pointer media featureChrome Full support 41Edge Full support 12Firefox Full support 64IE ? Opera Full support 28Safari Full support 9WebView Android ? Chrome Android Full support 50Edge Mobile Full support 12Firefox Android Full support 64Opera Android Full support 28Safari iOS Full support 9.2Samsung Internet Android ?
prefers-reduced-motion media feature
Experimental
Chrome No support NoEdge No support NoFirefox Full support 63IE No support NoOpera No support NoSafari Full support 10.1WebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android No support NoOpera Android No support NoSafari iOS Full support 10.3Samsung Internet Android ?
resolution media featureChrome Full support 29Edge ? Firefox Full support 8
Full support 8
Partial support 3.5
Notes
Notes Supports <integer> values only.
IE ? Opera Full support YesSafari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
scan media featureChrome No support NoEdge ? Firefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android No support NoOpera Android ? Safari iOS ? Samsung Internet Android ?
scripting media feature
ExperimentalNon-standard
Chrome No support No
Notes
No support No
Notes
Notes See bug 489957.
Edge ? Firefox No support No
Notes
No support No
Notes
Notes See bug 1166581.
IE No support NoOpera No support NoSafari No support NoWebView Android No support No
Notes
No support No
Notes
Notes See bug 489957.
Chrome Android No support No
Notes
No support No
Notes
Notes See bug 489957.
Edge Mobile ? Firefox Android No support No
Notes
No support No
Notes
Notes See bug 1166581.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android ?
update media feature
Experimental
Chrome No support NoEdge ? Firefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
width media featureChrome Full support YesEdge ? Firefox Full support YesIE Full support 9Opera Full support YesSafari Full support YesWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
-moz-device-pixel-ratio media feature
DeprecatedNon-standard
Chrome No support NoEdge ? Firefox Full support 4IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
-webkit-animation media feature
Non-standard
Chrome Full support YesEdge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
-webkit-device-pixel-ratio media feature
Non-standard
Chrome Full support YesEdge ? Firefox Full support 49
Notes Disabled
Full support 49
Notes Disabled
Notes 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.
Full support 45
Notes Disabled
Notes 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.
IE No support NoOpera Full support YesSafari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
-webkit-max-device-pixel-ratio media feature
Non-standard
Chrome Full support YesEdge ? Firefox Full support 49
Notes Disabled
Full support 49
Notes Disabled
Notes 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.
Full support 45
Notes Disabled
Notes 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.
IE No support NoOpera Full support YesSafari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
-webkit-min-device-pixel-ratio media feature
Non-standard
Chrome Full support YesEdge ? Firefox Full support 63
Notes
Full support 63
Notes
Notes Implemented as an alias for for -moz-device-pixel-ratio.
Full support 49
Notes Disabled
Notes 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.
Full support 45
Notes Disabled
Notes 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.
IE No support NoOpera Full support YesSafari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
-webkit-transform-2d media feature
Non-standard
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera Full support YesSafari Full support 1WebView Android ? Chrome Android ? Edge Mobile No support NoFirefox Android No support NoOpera Android ? Safari iOS ? Samsung Internet Android ?
-webkit-transform-3d media feature
Non-standard
Chrome Full support YesEdge ? Firefox Full support 49
Full support 49
Full support 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.
IE ? Opera Full support YesSafari Full support 1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
-webkit-transition media feature
DeprecatedNon-standard
Chrome No support NoEdge ? Firefox No support NoIE ? Opera Full support YesSafari Full support 1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
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

  • Use @supports to apply styles that depend on browser support for various CSS technologies.

Document Tags and Contributors

Last updated by: mfuji09,