CSS resolution Media Feature

What You’ll Learn

The resolution media feature targets screen pixel density. Serve sharper styles and assets on Retina and high-DPI displays with min-resolution queries.

Introduction

Standard screens use roughly 96 dpi (1 CSS pixel per device pixel). Retina and high-DPI phones pack more pixels into the same space — text and images can look blurry if you only provide low-resolution assets.

The @media (min-resolution) feature lets CSS detect that density and apply sharper borders, larger icons, or adjusted typography on dense screens.

Definition and Usage

Write @media (min-resolution: 2dppx) or @media (min-resolution: 192dpi) to match Retina-class displays. Use max-resolution for low-density fallbacks when needed.

📝 Syntax

Use min-resolution, max-resolution, or exact resolution inside @media:

/* Retina and high-DPI screens (2× density) */
@media (min-resolution: 2dppx) {
  /* High-DPI styles */
}

/* Same threshold in dpi (2 × 96 = 192) */
@media (min-resolution: 192dpi) {
  /* Equivalent Retina query */
}

/* Low-density screens only */
@media (max-resolution: 1.49dppx) {
  /* Standard-DPI fallback */
}

Accepted Units

• dpi — Dots per inch. Standard displays are ~96dpi; Retina is ~192dpi.
• dppx — Dots per CSS pixel. 1dppx = standard, 2dppx = Retina.
• dpcm — Dots per centimeter (less common; 1dppx ≈ 37.8dpcm).

Common Pixel Densities

resolution vs min-width

resolution vs srcset

Basic Example

body {
  background-color: #f1f5f9;
}

@media (min-resolution: 192dpi) {
  body {
    background-color: #dbeafe;
  }
}

Default Value

There is no CSS default. Without a resolution query, styles apply at all densities. Most desktops are 1dppx (96dpi).

Syntax Rules

• Prefer min-resolution: 2dppx or 192dpi for Retina targeting.
• Combine with commas for fallback: (min-resolution: 2dppx), (min-resolution: 192dpi).
• Do not use the invalid syntax @media resolution: from outdated tutorials.
• Combine with width: @media (min-width: 48rem) and (min-resolution: 2dppx).
• Use -webkit-min-device-pixel-ratio only for legacy support; prefer standard min-resolution.

Related Topics

• aspect-ratio — viewport shape queries
• color — color capability detection
• background-image property — swap high-DPI background assets

When to Use resolution

Reach for min-resolution when pixel density affects appearance:

• Hairline borders — Use 0.5px or thinner borders on 2dppx screens.
• Icon sizing — Swap to SVG or larger PNG assets on high-DPI displays.
• Font smoothing — Adjust -webkit-font-smoothing on dense screens.
• Background images — Serve 2× background assets when CSS images are unavoidable.
• Shadows and details — Fine-tune box-shadow blur for crisp rendering.

Examples Gallery

Practice resolution with dpi backgrounds, dppx typography, hairline borders, and combined width queries.

body {
  background-color: #f1f5f9;
}

@media (min-resolution: 192dpi) {
  body {
    background-color: #dbeafe;
  }
}

p {
  font-size: 1rem;
}

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

.card {
  padding: 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
}

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

.hero {
  background-size: cover;
  background-image: url("hero.jpg");
}

@media (min-width: 48rem) and (min-resolution: 2dppx) {
  .hero {
    background-image: url("hero@2x.jpg");
  }
}

🛠 Usage Tips

• Prefer srcset for images — Let the browser pick image files; use resolution for CSS-only tweaks.
• Use dppx for clarity — 2dppx maps directly to device pixel ratio.
• Provide dpi fallback — (min-resolution: 2dppx), (min-resolution: 192dpi) covers older syntax needs.
• Test on real devices — Retina MacBooks and modern phones show the difference.
• SVG for icons — Vector icons scale cleanly; resolution queries matter less for SVG.

⚠️ Common Pitfalls

• Invalid syntax — @media resolution: is wrong; use (min-resolution: 2dppx).
• Confusing with viewport size — High resolution does not mean large screen; a phone can be 3dppx.
• Replacing srcset — Do not use resolution queries as the primary image delivery strategy.
• Forgetting standard displays — Always provide good 1dppx defaults.
• 0.5px borders everywhere — Some old browsers render half pixels poorly; test fallbacks.

♿ Accessibility

• Do not shrink text — High-DPI screens still need readable font sizes.
• Contrast still matters — Sharp pixels do not fix low color contrast.
• Zoom support — Resolution queries must not block user text scaling.
• Meaningful images — High-res decorative images should not slow page load.
• Focus visibility — Hairline focus rings may be too thin; keep focus styles visible.

💡 Best Practices

Related Topics