CSS <resolution> Data Type

The CSS <resolution> data type represents pixel density or resolution. It uses the dpi, dpcm, and dppx units and is commonly used in media queries and image-related CSS features.

Syntax

A <resolution> value consists of a number followed immediately by a resolution unit:

96dpi
37.8dpcm
1dppx
2dppx
300dpi

There must be no space between the numeric value and the unit.

Resolution Units

CSS provides three resolution units:

Unit	Name	Description
`dpi`	Dots per inch	Represents the number of dots per CSS inch.
`dpcm`	Dots per centimeter	Represents the number of dots per CSS centimeter.
`dppx`	Dots per pixel unit	Represents the number of dots per CSS pixel.

dpi Unit

The dpi unit represents dots per CSS inch. CSS defines one inch as 96 CSS pixels, so 96dpi is equivalent to 1dppx.

96dpi
192dpi
300dpi

A value of 192dpi is equivalent to 2dppx.

dpcm Unit

The dpcm unit represents dots per CSS centimeter. Since one CSS inch equals 2.54 CSS centimeters, 1dppx is approximately equal to 37.8dpcm.

37.8dpcm
75.6dpcm

These values are approximately equivalent to 1dppx and 2dppx, respectively.

dppx Unit

The dppx unit represents dots per CSS pixel. A value of 1dppx corresponds to 96dpi, while 2dppx corresponds to 192dpi.

1dppx
1.5dppx
2dppx
3dppx

The dppx unit is especially convenient when describing device or image resolution relative to CSS pixels.

Resolution Unit Conversions

The three resolution units can represent equivalent resolutions using different scales:

dppx	dpi	dpcm
`1dppx`	`96dpi`	Approximately `37.8dpcm`
`2dppx`	`192dpi`	Approximately `75.6dpcm`
`3dppx`	`288dpi`	Approximately `113.4dpcm`

<resolution> Example

The <resolution> data type can be used with the resolution media feature to apply styles when the output device meets a specified resolution:

@media (min-resolution: 2dppx) {
  .resolution-example {
    background-color: #0088cc;
    color: #fff;
  }
}

Browser Result

High-resolution styling example

The media query applies its styles when the output device has a resolution of at least 2dppx. The Browser Result illustrates the styling applied when that condition is met.

The <resolution> data type is used by CSS features that select or adapt content according to output resolution, including:

resolution media feature
min-resolution media feature
max-resolution media feature
image-set() resolution values

Specifications

The <resolution> data type is defined in the CSS Values and Units Module Level 4 .

CSS <resolution> Data Type