<resolution>
A media query property that describes the pixel density of the output device (like a 'Retina' display). It allows you to provide higher-quality images only for screens that can actually see the difference.
Quick example
@media (min-resolution: 2dppx) {
/* Styles applied only to high-density/Retina displays */
.icon {
background-image: url('icon-2x.png');
}
}<resolution> Browser Support
Widely available Since 2022 95% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2022.
Safe to use without fallbacks.
29+
8+
16+
12+