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	10.1	X	2.0

Last updated by CSSPortal on: 9th December 2019