Widely available Helpful for image fidelity and print-oriented cases, though modern responsive image features often cover the most common needs.

resolution media query

The resolution CSS media feature can be used to test the pixel density of the output device.

ResolutionDisplaysMedia query

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.at-rules.media.resolution
29
12
8
16
29
16
css.types.resolution

The CSS data type, used for describing resolutions in media queries, denotes the pixel density of an output device, i.e., its resolution.
29
12
8
16
29
16
CSS type
dpcm

`dpcm` unit
29
12
8
16
29
16
dpi

`dpi` unit
29
12
8
16
29
16
dppx

`dppx` unit
29
12
16
16
29
16
x

`x` unit
68
79
62
16
68
16
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (8)
Implementation note
  • Supports `<integer>` values only.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (8)
Implementation note
  • Supports `<integer>` values only.

Syntax

CSS 
/* Displays with a resolution of 2x or higher */
@media (min-resolution: 2dppx) {
  .logo {
    background-image: url('logo@2x.png');
    background-size: 200px 60px;
  }
}

/* High resolution for printing */
@media print and (min-resolution: 300dpi) {
  .chart {
    background-image: url('chart-hires.png');
  }
}

Live demo

1x resolution

resolution media query 1x resolution demo.

PreviewFullscreen

2x resolutionsupport

resolution media query 2x resolutionsupport demo.

PreviewFullscreen

printuse 300dpi

resolution media query printuse 300dpi demo.

PreviewFullscreen

Use cases

  • Sharper visual assets

    Serve denser imagery or refined decoration when display density makes the extra detail worthwhile.

  • Print and output tuning

    Adjust styles for environments where output resolution changes the expected presentation.

Cautions

  • Resolution alone does not tell you everything about screen size or reading distance.
  • Prefer semantic responsive media features when they solve the asset problem more directly.

Accessibility

  • Sharper assets can help readability, but text should remain real text whenever possible.
  • Do not gate essential information behind image quality improvements that only some screens receive.

Related links