<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.