CSS <resolution> Data Type

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The <resolution> CSS data type represents a measurement of the density of pixels or dots in a display device. It is most commonly used in media queries to determine the screen's sharpness or clarity, which can help developers adapt content for high-resolution displays such as Retina screens or print layouts. A <resolution> value can be expressed in units such as dots per inch (dpi), dots per centimeter (dpcm), or dots per pixel (dppx), allowing precise control over how content scales and renders across different devices.

One of the main applications of <resolution> is in responsive design, particularly when using the @media rule to apply styles conditionally based on the device's resolution. By detecting higher-density screens, you can serve higher-quality images, sharper icons, or adjust layouts to enhance readability and visual fidelity.

<resolution> also interacts with other length or ratio-based types. For example, it complements <length> when scaling graphics or typography proportionally to a device's pixel density. This ensures that visual elements maintain consistent physical dimensions regardless of the screen's pixel density.

Here are some code examples demonstrating the use of <resolution> in media queries:

/* Apply high-resolution images for devices with at least 2dppx */
@media (min-resolution: 2dppx) {
  body {
    background-image: url("high-res-background.png");
  }
}

/* Apply different styles for print vs. screen resolution */
@media print and (min-resolution: 300dpi) {
  body {
    font-size: 12pt;
    line-height: 1.5;
  }
}

In these examples, the first query targets screens with a high pixel density, ensuring graphics appear crisp. The second query adapts typography for high-resolution print outputs, improving legibility. The <resolution> type is therefore a powerful tool in creating adaptive and visually consistent web designs across diverse devices.

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

HTML

<div class="demo">

    <h2>CSS &lt;resolution&gt; example</h2>

    <div class="indicator" aria-hidden="true"></div>

    <p class="note">The badge label and background change depending on the device resolution (dpi / dpcm / dppx).</p>

</div>

CSS

/* Base layout */
:root {
    --radius: 12px;
    --pad: 18px;
    --bg-low: linear-gradient(135deg, #3a7bd5, #00d2ff);
    --bg-mid: linear-gradient(135deg, #6a11cb, #2575fc);
    --bg-high: linear-gradient(135deg, #ff7e5f, #feb47b);
    --label-color: rgba(255, 255, 255, 0.95);
}

* { box-sizing: border-box; }

.demo {
    max-width: 720px;
    margin: 36px auto;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    padding: var(--pad);
}

.demo h2 {
    margin: 0 0 12px 0;
    font-size: 18px;
    font-weight: 700;
}

.note {
    margin-top: 12px;
    color: #444;
    font-size: 13px;
}

/* The indicator box whose label is changed via pseudo-element content
   depending on resolution media queries */
.indicator {
    width: 100%;
    max-width: 540px;
    height: 140px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
    color: var(--label-color);
    font-weight: 600;
    font-size: 18px;
    text-align: center;
    background: var(--bg-low);
    transition: background 240ms ease, color 240ms ease;
    position: relative;
    overflow: hidden;
}

.indicator::after {
    content: "Default: resolution < 1.5dppx";
    display: block;
    padding: 12px 18px;
    border-radius: 8px;
    background: rgba(0,0,0,0.18);
}

/* Low-resolution target (examples using dppx, dpi, dpcm units are interchangeable) */
@media (max-resolution: 1.5dppx) {
    .indicator {
        background: linear-gradient(135deg, #355c7d, #6c5b7b);
    }

    .indicator::after {
        content: "Low resolution  -  max 1.5dppx (≈144dpi)";
    }
}

/* Mid-resolution using dpi unit */
@media (min-resolution: 144dpi) and (max-resolution: 191dpi) {
    .indicator {
        background: var(--bg-mid);
    }

    .indicator::after {
        content: "Medium resolution  -  144dpi to 191dpi";
    }
}

/* High-resolution using dppx unit (2dppx equals 192dpi) */
@media (min-resolution: 2dppx) {
    .indicator {
        background: var(--bg-high);
    }

    .indicator::after {
        content: "High resolution  -  2dppx and up (≥192dpi)";
    }
}

/* Alternative unit example (dpcm) demonstrating the same data type in a different unit */
@media (min-resolution: 75.6dpcm) {
    /* 75.6dpcm ≈ 192dpi (75.6 * 2.54 ≈ 192) */
    .indicator {
        box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    }
}

/* Optional: small responsive touch */
@media (max-width: 480px) {
    .indicator { height: 110px; font-size: 16px; }
    .demo { padding: 12px; }
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS resolution data type. Hover over a browser icon to see the version that first introduced support for this CSS data type.