<resolution>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2022.
The<resolution>CSSdata type, used for describingresolutions inmedia queries, denotes the pixel density of an output device, i.e., its resolution.
On screens, the units are related toCSS inches, centimeters, or pixels, not physical values.
Syntax
The<resolution> data type consists of a strictly positive<number> followed by one of the units listed below. As with all CSS dimensions, there is no space between the unit literal and the number.
Units
dpiRepresents the number ofdots per inch. Screens typically contains 72 or 96 dots per inch, but the dpi for printed documents is usually much greater. As 1 inch is 2.54 cm,
1dpi ≈ 0.39dpcm.dpcmRepresents the number ofdots per centimeter. As 1 inch is 2.54 cm,
1dpcm ≈ 2.54dpi.dppxRepresents the number of dots per
pxunit. Due to the 1:96 fixed ratio of CSSinto CSSpx,1dppxis equivalent to96dpi, which corresponds to the default resolution of images displayed in CSS as defined byimage-resolution.xAlias for
dppx.
Note:Although the number0 is always the same regardless of unit, the unit may not be omitted. In other words,0 is invalid and does not represent0dpi,0dpcm, or0dppx.
Examples
Use in a media query
@media print and (resolution >= 300dpi) { /* … */}@media (resolution: 120dpcm) { /* … */}@media (resolution >= 2dppx) { /* … */}@media (resolution: 1x) { /* … */}Valid resolutions
96dpi50.82dpcm3dppx
Invalid resolutions
72 dpi Spaces are not allowed between the number and the unit.ten dpi The number must use digits only.0 The unit is required.
Specifications
| Specification |
|---|
| CSS Values and Units Module Level 4 # resolution |
Browser compatibility
See also
- resolution media feature
- The
image-resolutionproperty - Using @media queries