<resolution> | CSS Types & Functions

A media query property that describes the pixel density of the output device (like a 'Retina' display). It allows you to provide higher-quality images only for screens that can actually see the difference.

Quick example

@media (min-resolution: 2dppx) {
  /* Styles applied only to high-density/Retina displays */
  .icon {
    background-image: url('icon-2x.png');
  }
}

All units

Resolution units

Used in media queries and the image-resolution property to target screens by pixel density.

Unit	Measures	Notes	Baseline
`dpi`	Dots per inch	Standard print density unit. 96dpi = 1dppx.	Widely
`dpcm`	Dots per centimeter	Metric counterpart to dpi. Rarely used.	Widely
`dppx`	Dots per CSS pixel	Most useful on the web. 1dppx = standard density, 2dppx = Retina.	Widely
`x`	Alias for dppx	Shorthand. 2x is the same as 2dppx.	Widely

<resolution> Browser Support

Widely available Since 2022 95% global usage

This feature is well established and works across many devices and browser versions. It has been available across browsers since 2022.

Safe to use without fallbacks.

View on caniuse.com → View on MDN → View on webstatus.dev → View spec → Learn more about Baseline →

29+

16+

12+