CSS resolution Media Feature

Definition and Usage

The resolution media feature tests the pixel density of the output device—how many device dots map to each CSS inch or pixel.

It is a range feature: use min-resolution and max-resolution (or modern comparison syntax) to target high-DPI / Retina screens. Common units: dpi, dpcm, dppx, and x (alias for dppx).

CSS Syntax

Also valid: (max-resolution: …), exact (resolution: …), and range forms like (resolution >= 2dppx).

Feature Values

How to Use resolution

Start with 1× styles, then enhance for denser screens.

1. Ship a solid default that looks fine at 1dppx.
2. Add @media (min-resolution: 2dppx) (or 192dpi) for Retina tweaks.
3. Prefer dppx / x for screens; use dpi when thinking in print density.
4. For images, prefer srcset / image-set(); use resolution queries for CSS-only details.

Live Preview

This browser’s density via matchMedia and devicePixelRatio.

CSS Examples

Each snippet focuses on resolution. Use Try It Yourself for a live editor.

<style>
  p {
    background: #f1f5f9;
    padding: 0.75rem;
  }

  @media (min-resolution: 192dpi) {
    p {
      background: #dbeafe;
    }
  }
</style>

<p>Gray by default; blue on 192dpi+ screens.</p>

<style>
  p {
    font-size: 1rem;
  }

  @media (min-resolution: 1.5dppx) {
    p {
      font-size: 1.25rem;
    }
  }
</style>

<p>Font size increases on 1.5dppx+ screens.</p>

<style>
  .card {
    padding: 0.75rem;
    border: 1px solid #94a3b8;
  }

  @media (min-resolution: 2dppx) {
    .card {
      border-width: 0.5px;
    }
  }
</style>

<div class="card">Hairline border on 2dppx screens.</div>

Key Takeaways