coderef

resolution media queryBaseline · Widely available

The resolution CSS media query sets styles based on the pixel density, or how many pixels a device uses to display a single CSS pixel.

Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since Sep 12, 2022. Widely available since Mar 12, 2025.

How to use ↓Compare browsers

Browser support

DesktopChrome
1–67Not supported
68+Supportedsince Jul 24, 2018
Current: 155
Edge
12–18Not supported
79+Supportedsince Jan 15, 2020
Current: 154
Firefox
1–61Not supported
62+Supportedsince Sep 5, 2018
Current: 157
Safari
1–15.6Not supported
16+Supportedsince Sep 12, 2022
Current: 27
MobileChrome Android
18–67Not supported
68+Supportedsince Jul 24, 2018
Current: 155
Firefox Android
4–61Not supported
62+Supportedsince Sep 5, 2018
Current: 157
Safari iOS
1–15.6Not supported
16+Supportedsince Sep 12, 2022
Current: 27

How to use

This feature is Baseline widely available — use it freely, no fallback needed.

Example

Full syntax and examples are on MDN: resolution.

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 (6). The overall table above shows when the whole feature works.

Sub-featureChromeEdgeFirefoxSafariChrome AndroidFirefox AndroidSafari iOS
@media.resolution291281629816
<resolution>291281629816
<resolution>.dpcm291281629816
<resolution>.dpi291281629816
<resolution>.dppx29121616291616
<resolution>.x68796216686216