CSS <resolution> Data Type
Description
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 or dppx). Like for any CSS dimension, there is no space between the number and the unit abbreviation.
Syntax
property: <resolution>;
Values
- dpiThis 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.
- dpcmThis unit represents the number of dots per centimeter. As 1 inch is 2.54 cm, 1dpcm ≈ 0.39dpi.
- dppxThis 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.
Example
@media print and (min-resolution: 300dpi) { ... }
Browser Support
Desktop | |||||
9 | 12 | 29 | 8 | 9.5 | X |
Tablets / Mobile | |||||
![]() |
|||||
≤37 | 29 | 8 | Yes | X | 1.5 |
Last updated by CSSPortal on: 9th December 2019