W3cubDocs

/CSS

<resolution>

The <resolution> CSS data type, used for describing resolutions in media queries, denotes the pixel density of an output device, i.e., its resolution.

On screens, the units are related to CSS 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

dpi: Represents the number of dots 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.
dpcm: Represents the number of dots per centimeter. As 1 inch is 2.54 cm, 1dpcm ≈ 2.54dpi.
dppx: Represents the number of dots per px unit. Due to the 1:96 fixed ratio of CSS in to CSS px, 1dppx is equivalent to 96dpi, which corresponds to the default resolution of images displayed in CSS as defined by image-resolution.

Note: Although the number 0 is always the same regardless of unit, the unit may not be omitted. In other words, 0 is invalid and does not represent 0dpi, 0dpcm, or 0dppx.

Examples

Use in a media query

@media print and (min-resolution: 300dpi) { ... }

Valid resolutions

96dpi
50.82dpcm
3dppx

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	Status	Comment
CSS Values and Units Module Level 3 The definition of '<resolution>' in that specification.	Candidate Recommendation	Adds the `dppx` unit.
Media Queries The definition of '<resolution>' in that specification.	Recommendation	Initial definition.

Browser compatibility

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	29	20 (12.10240)	3.5 (1.9.1)^[1]	9	9.5	No support^[2] (Yes)
`dppx`	29	20 (12.10240)	16.0 (16.0)	No support	12.10	No support

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	No support^[2]	?	(Yes)	?	(Yes)	No support^[2]
`dppx`	?	?	16.0 (16.0)	?	12.10	?

[1] Before Firefox 8 (Gecko 8.0), Firefox erroneously accepted only CSS dimensions that were an <integer> followed by the unit. From that version, it supports any valid CSS dimensions (<number> immediately followed by the unit).

[2] Safari does not support this unit in media queries, but uses the non-standard device-pixel-ratio unit instead. See bug 16832.