Media queries
The @media CSS at-rule can be used to apply part of a style sheet based on the result of one or more media queries. With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.
Note: In JavaScript, the rules created using @media can be accessed with the CSSMediaRule CSS object model interface.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 3 | 18 | 1 | |
| The aspect-ratio CSS media feature can be used to test the aspect ratio of the viewport. | 3 | 12 | 3.5 | 5 | 18 | 4.2 |
| The calc() CSS function lets you perform calculations when specifying CSS property values. It can be used with <length>, <frequency>, angle, <time>, <percentage>, <number>, <integer>, and color_value values. | 66 | 79 | 59 | 12 | 66 | 12 |
| The color CSS media feature can be used to test the number of bits per color component (red, green, blue) of the output device. | 1 | 12 | 2 | 3 | 18 | 1 |
| The color-index CSS media feature can be used to test the number of entries in the output device's color lookup table. | 29 | 79 | | 8 | 29 | 8 |
| The grid CSS media feature can be used to test whether the output device uses a grid-based screen. | 1 | 12 | 2 | 3 | 18 | 1 |
| The height CSS media feature can be used to apply styles based on the height of the viewport (or the page box, for paged media). | 1 | 12 | 2 | 3 | 18 | 1 |
media features Media feature expressions | 1 | 12 | 1 | 3 | 18 | 1 |
media query values Media query value support | 66 | 79 | 59 | | 66 | |
| The monochrome CSS media feature can be used to test the number of bits per pixel in the monochrome frame buffer of the output device. | 1 | 79 | 2 | 3 | 18 | 1 |
nested-queries Nested media queries | 26 | 12 | 11 | 7 | 26 | 7 |
| Media queries allow you to apply CSS styles depending on a device's media type (such as print vs. screen) or other features or characteristics such as screen resolution or orientation, aspect ratio, browser viewport width or height, user preferences such as preferring reduced motion, data usage, or transparency. | 104 | 104 | 64 | 16.4 | 104 | 16.4 |
| The orientation CSS media feature can be used to test the orientation of the viewport (or the page box, for paged media). | 3 | 12 | 2 | 5 | 18 | 4.2 |
| The width CSS media feature can be used to test the width of the viewport (or the page box, for paged media). | 1 | 12 | 2 | 3 | 18 | 1 |
| Other | ||||||
| The CSS data type describes the proportional relationship between two values. It mostly represents the aspect ratio, which relates width to height. For example, the is used as a value for the aspect-ratio media feature in @media media queries, the aspect-ratio size feature in @container container queries, and as a value for the CSS aspect-ratio property. | 3 | 12 | 3.5 | 5 | 18 | 4.2 |
| CSS type | ||||||
number value Experimental Accepts a single <number> as a value. | | | 78 | | | |
Syntax
@media screen and (min-width: 768px) {
.container { max-width: 720px; }
}
@media (prefers-color-scheme: dark) {
body { background: #1a1a1a; }
}Live demo
Use cases
-
Responsive layouts
Adjust spacing, columns, and typography across different viewport sizes and devices.
-
Preference-aware styling
Respond to motion, contrast, or color-scheme preferences when the environment exposes them.
Cautions
- Too many overlapping queries can make behavior hard to predict and debug.
- Start from strong component defaults before layering media-specific variations.
Accessibility
- Media queries are a key tool for honoring user preferences such as reduced motion and higher contrast.
- Responsive CSS should preserve reading order, touch targets, and zoom behavior at every breakpoint.