Media queries
Widely available
The @media CSS rule conditionally applies styles based on the output device type, its capabilities, and the user's preferences. Media queries are composed of an optional media type such as screen or print, and one or more mandatory media features, such as prefers-reduced-animations.
Compatibility (view on caniuse.com)
- Chrome 1 Released on 2008-12-11
- Chrome Android 18 Released on 2012-06-27
- Edge 12 Released on 2015-07-29
- Firefox 1 Released on 2004-11-09
- Firefox for Android 4 Released on 2011-03-29
- Safari 3 Released on 2007-10-26
- Safari on iOS 1 Released on 2007-06-29
MDN docs
- @media property
- @media/aspect-ratio property
- calc property
- @media/color property
- @media/color-index property
- @media/grid property
- @media/height property
- @media/monochrome property
- CSS_media_queries/Using_media_queries: testing_for_multiple_features_with_or; declaration
- @media/orientation property
- @media/width property
- ratio property
Specifications
BCD data
- css.at-rules.media
- css.at-rules.media.aspect-ratio
- css.at-rules.media.calc
- css.at-rules.media.color
- css.at-rules.media.color-index
- css.at-rules.media.grid
- css.at-rules.media.height
- css.at-rules.media.media_features
- css.at-rules.media.media_query_values
- css.at-rules.media.monochrome
- css.at-rules.media.nested-queries
- css.at-rules.media.or_syntax
- css.at-rules.media.orientation
- css.at-rules.media.width
- css.types.ratio