Media queries
Media queries apply styles conditionally based on device characteristics, user preferences, and environment. They are the foundation of responsive and adaptive CSS.
Overview
Media queries apply styles conditionally based on device characteristics, user preferences, and environment. They are the foundation of responsive and adaptive CSS.
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.
Related links
Powered by web-features