CSS <resolution> Data Type

Description

The CSS <resolution> data type is used to describe the pixel density of an output device, i.e., its resolution. On screens, the units are related to CSS inches, centimeters, or pixels, not physical values.

The <resolution> data type is used in media queries to target specific devices or types of devices based on their resolution. For example, the following media query would target devices with a resolution of at least 1280 dots per inch (dpi):

@media (resolution: 1280dpi) {
  /* CSS rules for devices with a resolution of at least 1280dpi */
}

The <resolution> data type can also be used to set the value of CSS properties in a way that is responsive to the resolution of the device. For example, the following CSS code would set the font size of the body element to be 16 pixels on devices with a resolution of at least 1280dpi, and 12 pixels on devices with a lower resolution:

body {
  font-size: 16px;
  @media (resolution: < 1280dpi) {
    font-size: 12px;
  }
}

This ensures that the font size is always appropriate for the resolution of the device, regardless of whether it is a high-resolution display or a low-resolution display.

Here are the units that can be used with the <resolution> data type:

• dpi: Dots per inch
• dpcm: Dots per centimeter
• dppx: Dots per px unit

The <resolution> data type is a useful tool that can be used to create responsive websites that look good on all devices, regardless of their resolution.

Syntax

property: <resolution>;

Values

• dpiThis unit represents the number of dots per inch. A screen typically contains 72 or 96 dpi; a printed document usually reach much greater dpi. As 1 inch is 2.54 cm, 1dpi ≈ 2.54dpcm.
• dpcmThis unit represents the number of dots per centimeter. As 1 inch is 2.54 cm, 1dpcm ≈ 0.39dpi.
• dppxThis unit represents the number of dots per px unit. Due to the 1:96 fixed ratio of CSS in to CSS px, 1dppx is equivalent to 96dpi, that corresponds to the default resolution of images displayed in CSS as defined by the image-resolution property.

Example

@media print and (min-resolution: 300dpi) { ... }

Browser Support

The following table will show you the current browser support for the CSS resolution data type.

Desktop
12	29	8	9.5	x

Tablets / Mobile
29	8	10.1	x	2	4.4

Last updated by CSSPortal on: 7th October 2023