CSS <resolution> Data Type

The <resolution> data type is used with media queries to denote the density of pixels of an output device — its resolution.

The CSS <resolution> data type represents the size of a single "dot" in a graphical representation by indicating how many of these dots fit in a CSS in, cm, or px.

When you see <resolution> (including the < and >) anywhere in the CSS specifications, this refers to the fact that the value can be a valid resolution.

Resolution values are dimensions denoted by <resolution>. A dimension is a number immediately followed by a unit identifier, which is an identifier.

The unit identifiers for <resolution> are:

dpi
Dots per inch.
dpcm
Dots per centimeter.
dppx
Dots per px unit.

Here's how CSS defines each of the lengths:

Unit Name Equivalence
cm centimeters 1cm = 96px/2.54
in inches 1in = 2.54cm = 96px
px pixels 1px = 1/96th of 1in

Here are some valid <resolution> values:

As with all dimensions, there must be no space between the value and the unit identifier.

A <resolution> Example

The <resolution> data type is commonly used within media queries. Here's an example of a media query:

Media queries allow you to use different styles for different devices. In this example, we test against the device's resolution. If the device has a resolution of at least 300dpi, then the enclosed styles will apply to that device. If the device's resolution is lower than 300dpi, then it won't use those styles.

Here's another example. This time we test for a resolution of 2dppx:

Here's a working example where I display one of four background colors depending on the user's screen resolution:

I also use the content property to generate a different message depending on the resolution.

CSS Specifications