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
Explorer Edge Chrome Firefox Opera Safari
9122989.5X
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
≤37298YesX1.5

Last updated by CSSPortal on: 9th December 2019