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:

<style>
  body {
    background: gray;
  }
  body::before {
    content: "Your screen is lower than 72dpi - time to upgrade!";
    font-size: 2em;
    color: white;
  }
  @media screen and (min-resolution: 72dpi) { 
    body {
      background: red;
    }
    body::before {
      content: "Your screen is between 72dpi and 150dpi";
    }
  }
  @media screen and (min-resolution: 150dpi) { 
    body {
      background: green;
    }
    body::before {
      content: "Your screen is between 150dpi and 300dpi";
    }
  }
  @media screen and (min-resolution: 300dpi) { 
    body {
      background: blue;
    }
    body::before {
      content: "Your screen is at least 300dpi";
    }
  }
</style>

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

CSS Specifications

The <resolution> data type is defined in CSS Values and Units Module Level 3 (W3C Candidate Recommendation, 29 September 2016)

CSS <resolution> Data Type

A <resolution> Example

CSS Specifications

A `<resolution>` Example