Media queriesBaseline · 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.
Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since Jul 29, 2015. Widely available since Jan 29, 2018.
Browser support
How to use
This feature is Baseline widely available — use it freely, no fallback needed.
Example
Full syntax and examples are on MDN: @media.
Feature detection
There’s no simple runtime check for this feature; rely on the support table and test in your target browsers.
Documentation (MDN)
Specification
Usage share
Sub-features
Support for each part of the feature (16). The overall table above shows when the whole feature works.
| Sub-feature | Chrome | Edge | Firefox | Safari | Chrome Android | Firefox Android | Safari iOS |
|---|---|---|---|---|---|---|---|
| @media | 1 | 12 | 1 | 3 | 18 | 4 | 1 |
| @media.aspect-ratio | 3 | 12 | 3.5 | 5 | 18 | 4 | 4.2 |
| @media.calc | 66 | 79 | 59 | 12 | 66 | 59 | 12 |
| @media.color | 1 | 12 | 2 | 3 | 18 | 4 | 1 |
| @media.color-index | 29 | 79 | ✕ | 8 | 29 | ✕ | 8 |
| @media.grid | 1 | 12 | 2 | 3 | 18 | 4 | 1 |
| @media.height | 1 | 12 | 2 | 3 | 18 | 4 | 1 |
| @media.media_features | 1 | 12 | 1 | 3 | 18 | 4 | 1 |
| @media.media_query_values | 66 | 79 | 59 | ✕ | 66 | 59 | ✕ |
| @media.monochrome | 1 | 79 | 2 | 3 | 18 | 4 | 1 |
| @media.nested-queries | 26 | 12 | 11 | 7 | 26 | 14 | 7 |
| @media.or_syntax | 104 | 104 | 64 | 16.4 | 104 | 64 | 16.4 |
| @media.orientation | 3 | 12 | 2 | 5 | 18 | 4 | 4.2 |
| @media.width | 1 | 12 | 2 | 3 | 18 | 4 | 1 |
| <ratio> | 3 | 12 | 3.5 | 5 | 18 | 4 | 4.2 |
| <ratio>.number_value | ✕ | ✕ | 78 | ✕ | ✕ | 79 | ✕ |