CSS Data Type - <resolution>

The CSS data type <resolution>, when used in media queries, indicates the pixel density of an output device, such as its resolution.

Instead of using physical measurements, the units for screens are CSS inches, centimeters, or pixels.

Units

  • dpi - Indicates the number of dots in an inch. Printing documents frequently have a significantly higher dots per inch (dpi) than screens, which typically have 72 or 96 dpi. One inch is equivalent to 2.54 centimeters, so one dpi is roughly equivalent to 0.39 dots per centimeter (dpcm).

  • dpcm - Indicates the number of dots per centimeter. Since one inch is equivalent to 2.54 cm, one dot per centimeter (dpcm) is roughly equivalent to 2.54 dots per inch (dpi).

  • dppx - Indicates the number of dots per unit of px. One dot per pixel (dppx) is equal to 96 dots per inch (dpi) due to the fixed 1:96 ratio between CSS in and CSS px, which corresponds to the default resolution for images displayed in CSS as specified by image-resolution.

  • x - Alias for dppx.

Syntax

One of the listed units is followed by a positively valued <number> in the <resolution> data type. The unit symbol and the number should be separated by no space, just like in all other CSS dimensions.

CSS <resolution> - Basic Example

The following example demonstrates the usage of CSS datatype <resolution>

<html>
<head>
<style>
   div {
      margin: 10px;
      background-color: aqua;
   }
   @media (min-resolution: 80dpi) {
      .box1 {
         background-color: red;
      }
   }
   @media (max-resolution: 300dpi) {
      .box2 {
         background-color: yellow;
      }
   }
   @media (resolution: 96dpi) {
      .box3 {
         background-color: pink;
      }
   }
</style>
</head>
<body>
   <div class="box1">This box will have a red background when the screen resolution is at least 80dpi.</div>
   <div class="box2">This box will have a yellow background for devices with a maximum resolution of 300dpi.</div>
   <div class="box3">This box will have a pink background when the screen resolution is exactly 96dpi.</div>
</body>
</html>
Advertisements