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).

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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support1 Yes169.21.3
speech media type No No No No9.2 No
Media feature expressions1 Yes199.21.3
any-hover media feature4116 No1 No289
any-pointer media feature4112 No1 No289
aspect-ratio media feature4 ?3.5953 Yes
color media feature Yes ? Yes ? Yes Yes
color-gamut media feature58 ? No No45 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 feature46 No472 ? ? ?
grid media feature Yes ? Yes ? Yes Yes
height media feature ? ? ?9 ? ?
inverted-colors media feature No ? No No No Yes
hover media feature38312 No1 No289
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 ? No4 ? ? ?
overflow-inline media feature No ? No4 ? ? ?
pointer media feature4112 No1 ?289
resolution media feature29 ?

8

3.55

? Yes ?
scan media feature No ? No No No No
scripting media feature No6 ? No7 No No No
update media feature No ? No No No No
width media feature Yes ? Yes9 Yes Yes
-moz-device-pixel-ratio media feature No ?4 ? ? ?
-webkit-animation media feature Yes ? ? ? ? ?
-webkit-device-pixel-ratio media feature Yes ?

498 9

4510 8

No Yes ?
-webkit-max-device-pixel-ratio media feature Yes ?

4911 9

4510 11

No Yes ?
-webkit-min-device-pixel-ratio media feature Yes ?

638

4912 9

4510 12

No Yes ?
-webkit-transform-2d media feature No No No No Yes1
-webkit-transform-3d media feature Yes ?

49

4613

? Yes1
-webkit-transition media feature No ? No ? Yes1
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support1 ? Yes493.1 ?
speech media type No ? No No9 No No
Media feature expressions1 ? Yes493.1 ?
any-hover media feature414116 No1289.25.0
any-pointer media feature414112 No1289.2 ?
aspect-ratio media feature Yes ? ? ? ? No Yes
color media feature ? ? ? ? ? ? ?
color-gamut media feature ?58 ? No45 ? ?
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 No472 ? ? ?
grid media feature ? ? ? ? ? ? ?
height media feature ? ? ? ? ? ? ?
inverted-colors media feature ? No ? No No Yes ?
hover media feature ?5012 No1289.2 ?
light-level media feature No No ? No No No ?
monochrome media feature ? ? ? ? ? ? ?
orientation media feature Yes ? ? ? ? ? ?
overflow-block media feature ? No ? No4 ? ? ?
overflow-inline media feature ? No ? No4 ? ? ?
pointer media feature ?5012 No1289.2 ?
resolution media feature ? ? ? ? ? ? ?
scan media feature ? ? ? No ? ? ?
scripting media feature No6 No6 ? No7 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 ? ? ? ? ? ? ?

1. See bug 1035774.

2. Firefox 47 and later support display-mode values fullscreen and browser. Firefox 57 added support for minimal-ui and standalone values.

3. Before Chrome 41, the implementation was buggy and reported (hover: none) on non-touch-based computers with a mouse/trackpad. See bug 441613.

4. See bug 1422235.

5. Supports <integer> values only.

6. See bug 489957.

7. See bug 1166581.

8. Implemented as an alias for for -moz-device-pixel-ratio.

9. 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.

10. 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.

11. Implemented as an alias for for max--moz-device-pixel-ratio.

12. Implemented as an alias for for min--moz-device-pixel-ratio.

13. 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.

See also

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

Document Tags and Contributors

Last updated by: rachelandrew,