CSS resolution Media Query for High-DPI

The resolution Media Feature

CSS provides the resolution media feature to apply styles based on the pixel density of the output device.

Units

Unit	Meaning	1x equivalent
dppx	dots per pixel (CSS pixel)	1dppx
dpi	dots per inch	96dpi
dpcm	dots per centimeter	~38dpcm

Basic Usage

/* Target 2x displays */
@media (min-resolution: 2dppx) {
  .hero-bg {
    background-image: url('hero@2x.jpg');
  }
}

/* Target 3x displays */
@media (min-resolution: 3dppx) {
  .hero-bg {
    background-image: url('hero@3x.jpg');
  }
}

Cross-Browser Compatibility

Older WebKit browsers require a vendor prefix:

@media
  (min-resolution: 2dppx),
  (-webkit-min-device-pixel-ratio: 2) {
  /* high-DPI styles */
}

Modern browsers (Chrome 29+, Firefox 16+, Safari 10+, Edge 12+) support the standard resolution feature without prefixes.

Combining with Other Features

@media (min-resolution: 2dppx) and (min-width: 768px) {
  /* High-DPI styles for tablet and larger viewports */
}

JavaScript Equivalent

const isHighDPI = window.matchMedia('(min-resolution: 2dppx)').matches;

Best Practices

• Prefer dppx over dpi for clarity and precision
• Always provide a base (1x) style outside the media query
• Consider using image-set() in CSS for background images as a cleaner alternative