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.
Media queries in HTML
In HTML, media queries can be applied to various elements:
- In the
mediaattribute, they define the media to which a linked resource (typically CSS) should be applied.
- In the
mediaattribute, they define the media to which that source should be applied. (This is only valid inside
- In the
mediaattribute, they define the media to which the style should be applied.
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.
- 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
|CSS Conditional Rules Module Level 3||Candidate Recommendation|
|Media Queries Level 4||Candidate Recommendation|
|CSS Level 2 (Revision 1)||Recommendation||Initial definition|
We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
|Feature||Chrome||Edge||Firefox (Gecko)||Internet Explorer||Opera||Safari|
|Basic support||1.0||(Yes)||1.0 (1.7 or earlier)||9.0||9.2||1.3|
|Feature||Android||Edge||Firefox Mobile (Gecko)||IE Mobile||Opera Mobile||Safari Mobile|
|Basic support||1.0||(Yes)||1.0 (1.7)||9.0||9.0||3.1|
@supportsto apply styles that depend on browser support for various CSS technologies.