<resolution>

Summary

The <resolution> CSS data type, used in media queries, denotes the granularity or possible fineness of detail of an output device. It is expressed as a <number> immediately followed by a unit of resolution (dpi, dpcm, …). Like for any CSS dimension, there is no space between the number and the unit abbreviation.

The resolution value specifies the display or print dot density per unit of distance. A “dot” is the finest level of detail that the device can display, such as a physical screen pixel or a dot of printed ink.

On screens, the resolution is calculated relative to CSS inches, centimeters or pixels, not to physical values. For media queries, if the resolution is different in the horizontal and vertical directions both values must match the media query.

Unlike the CSS <length> data type, the unit may not be omitted for the value 0: specifying a resolution of 0 is invalid and does not represent 0dpi, 0dpcm, nor 0dppx.

Units

dpi: This unit represents the number of dots per inch. A screen typically contains 72 or 96 dpi; a printed document usually reach much greater dpi. As 1 inch is 2.54 cm, 1dpi ≈ 2.54dpcm.
dpcm; This unit represents the number of dots per centimeter. As 1 inch is 2.54 cm, 1dpcm ≈ 0.39dpi.
dppx; This unit 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, that corresponds to the default resolution of images displayed in CSS as defined by the image-resolution property.

Examples

Here are some correct uses of <resolution> values:

/* Correct use: a <number> (here an <integer>) followed by the unit. */
96dpi

/* Correct use in the context of a media query. */
@media print and (min-resolution: 300dpi) { ... }

Here are some incorrect uses:

/* Incorrect: no spaces allowed between the <number> and the unit. */
72 dpi

/* Incorrect: only digits must be used. */
ten dpi

/* Incorrect: the unit can be omitted for 0 values only for <length>. */
0

Related specifications

CSS Values and Units Module Level 3: Candidate Recommendation
CSS Image Values and Replaced Content Module Level 3: Candidate Recommendation
Media Queries: Recommendation

Attributions

This article contains content originally from external sources, including ones licensed under the CC-BY-SA license.
Portions of this content copyright 2012 Mozilla Contributors. This article contains work licensed under the Creative Commons Attribution-Sharealike License v2.5 or later. The original work is available at Mozilla Developer Network: Article