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.
In HTML, media queries can be applied to various elements:
<link>
element's media
attribute, they define the media to which a linked resource (typically CSS) should be applied.<source>
element's media
attribute, they define the media to which that source should be applied. (This is only valid inside <picture>
elements.)<style>
element's media
attribute, they define the media to which the style should be applied.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.
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 |
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 | No
|
No | 28 | 9 |
any-pointer media feature |
41 | 12 | No
|
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 |
@supports
to apply styles that depend on browser support for various CSS technologies.
© 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/Media_Queries