CSS Reference Data Type

<resolution>

The <resolution> CSS data type represents the resolution of an output device (screen or print). A resolution represents the size of a single “dot” in a graphical representation by indicating how many of these dots fit in a CSS in (inch), cm (centimeter), or px (pixel). That’s where the units dpi (dots per inch), dpcm (dots per centimeter), and dppx (dots per pixel) come from.
The format of a resolution value is a <number> followed by a case-insensitive unit of resolution: dpi, dpcm, dppx.There are no spaces allowed between the number and the unit.

CSS units of length (pixels, inches, and others) are related, and there’s a fixed ratio of 1:96 of CSS inches to pixels, which means that, in CSS, an inch is always equivalent to 96 pixels, or, CSS assumes that there are always 96 (CSS) pixels in an inch (see the <length> entry for details). Because of this, 1dppx is equal to 96dpi (multiply the number of dots in a pixel by 96 to get the number of dots in an inch).

In short, a resolution represents the density of pixels in an output device, or the number of pixels “squeezed” into a linear inch. The higher the number of pixels per inch, the higher the resolution, the crispier the display and the more details are visible.

Resolution values are usually used in CSS to restrict certain styles to certain output devices. The resolutions are defined in CSS media queries, which “query” the media output for certain conditions and apply the specific styles in the style sheet to these output devices if the conditions specified in the media query are met.

values

dpi
dots per inch
dpcm
dots per centimeter
dppx
dots per pixel

Examples

This media query expresses that a style sheet is usable on devices with a resolution greater than 300 dots per inch:

@media screen and (min-resolution: 300dpi) { 
 /* retina-specific styles */
}                   
                

The next media query expresses that a style sheet is usable on devices with a resolution greater than 118 dots per centimeter:

@media screen and (min-resolution: 118dpcm) {
  /* styles here */
}         
                

This media query expresses that a style sheet is usable on devices with resolution greater than 2 dots per pixel:

@media screen and (min-resolution: 2dppx) {
  /* retina styles here */
}         
                

The following are invalid resolution values:

10 dpi  /* no spaces allowed between the number and the unit */
0       /* must include unit */
                

Live Demo

If the output device you’re using to view this demo has a resolution greater than 300dpi (and using a modern browser that supports media queries), then you should see the text in the following demo white on a black background.

View this demo on the Codrops Playground

Browser Support

The resolution values are supported in Chrome 29+, Firefox 3.5+, IE 9+, and Opera 9.5+. They are not supported in Safari, Android and iOS.

Notes

The dppx resolution unit is currently only supported in Chrome 29+, Firefox 16+, and Opera 12.10+.

Written by

Last updated February 4, 2015 at 4:58 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.