<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.
Syntax
/* Usage 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.
29+
8+
16+
12+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more