The <resolution> CSS data types, used in media queries, denotes the density of pixels of an output device, its resolution. It is a <number> immediately followed by a unit of resolution (dpi, dpcm, ...). Like for any CSS dimension, there is no space between the unit literal and the number.

Even if all units represent the same time for the value 0, the unit may not be omitted in that case as it isn't a <length> : 0 is invalid and does not represent 0dpi, 0dpcm. [1]


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.
This unit represents the number of dots per centimeter. As 1 inch is 2.54 cm, 1dpcm ≈ 0.39dpi.


Here are some correct uses of <resolution> values:

96dpi                                              Correct use: a <number> (here an <integer>) followed by the unit.
@media print and (min-resolution: 300dpi) { ... }  Correct use in the context of a media query.

Here are some incorrect uses:

72 dpi                                             Incorrect: no spaces allowed between the <number> and the unit.
ten dpi                                            Incorrect: only digits must be used.
0                                                  Incorrect: the unit can be omitted for 0 values only for <length>.


Specification Status Comment
CSS Media Queries Level 3 Proposed Recommendation  

Browser compatibility

  • Desktop
  • Mobile

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support <4 3.5 (1.9.1) [*] 9 [2] 9.5 1.0 (?) [3]
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support yes yes ? yes yes

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

Tags (2)

Edit tags

Attachments (0)


Attach file