CSS - <resolution>
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.
Example
Here are some correct uses of <resolution> values:
96dpi Correct use: a <a href="css/number" title="The <number> CSS data type represents a number, either integer or fractional. Its syntax extends the one of the <integer> data value. To represent a fractional value, add the fractional part — a '.' followed by one or several decimal digits — to any <integer> data value. Like for <integer> data type, there isn't any unit associated to a <number>, which is not a CSS dimension."><code><number></code></a> (here an <a href="css/integer" title="The <integer> CSS data type denotes an integer number, positive or negative. There isn't any associated unit with the value. An integer consists of one or several decimal digits, 0 to 9, optionally preceded by one single + or - sign."><code><integer></code></a>) followed by the unit. @media print and (min-resolution: 300dpi) { ... } Correct use in the context of a <a href="css/media_queries/using_media_queries">media query</a>.
Here are some incorrect uses:
72 dpi Incorrect: no spaces allowed between the <a href="css/number" title="The <number> CSS data type represents a number, either integer or fractional. Its syntax extends the one of the <integer> data value. To represent a fractional value, add the fractional part — a '.' followed by one or several decimal digits — to any <integer> data value. Like for <integer> data type, there isn't any unit associated to a <number>, which is not a CSS dimension."><code><number></code></a> and the unit. ten dpi Incorrect: only digits must be used. 0 Incorrect: the unit can be omitted for 0 values only for <a href="css/length" title="The <length> CSS data type denotes distance measurements. It is a <number> immediately followed by a length unit (px, em, pc, in, mm, …). Like for any CSS dimension, there is no space between the unit literal and the number. The length unit is optional after the <number> 0."><code><length></code></a>.
Description
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.
On screens, the length is related to CSS inches, centimeters or pixels, not on physical values.
Even if all units represent the same resolution 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, nor 0dppx.
Browser Compatibility
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Basic support | 29 | 3.5 (1.9.1)[1] | 9 | 9.5 | No support[2] |
dppx |
29 | 16.0 (16.0) | ? | 12.10 | ? |
| Feature | Android | 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), it erroneously accepted only CSS dimensions that were <integer> followed by the unit. From that version, it supports any valid CSS dimensions (<number> immediately followed by the unit).
[2] Webkit engine does not support CSS resolution query as in the specification, the use of the non-standard device-pixel-ratio query is needed for browsers Safari, see bug 16832.
See Also
Specifications
| Specification | Status | Comment |
|---|---|---|
| CSS Values and Units Module Level 3 The definition of '<resolution>' in that specification. |
Candidate Recommendation | Factorization of the type in a more generic specification. No change |
| CSS Image Values and Replaced Content Module Level 3 The definition of '<resolution>' in that specification. |
Candidate Recommendation | Added the dppx unit |
| Media Queries The definition of '<resolution>' in that specification. |
Recommendation | Initial definition |
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 ≈ 0.39dpcm. dpcm- This unit represents the number of dots per centimeter. As 1 inch is 2.54 cm,
1dpcm ≈ 2.54dpi. dppx- This unit represents the number of dots per
pxunit. Due to the 1:96 fixed ratio of CSSinto CSSpx,1dppxis equivalent to96dpi, that corresponds to the default resolution of images displayed in CSS as defined byimage-resolution.
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/resolution