This is related, but perhaps not limited, to Apples Retina displays. These displays have a higher pixel density than previously used screens but the browser still acts as if it has the same number of pixels.
E.g. the iPhone 3GS had a display with 320 x 480 pixels but the iPhone 4 was released with 640 x 960 pixels. However, instead of showing website at that resolution the browser pretended to have a resolution 320 x 480 pixels.
This leads on to the invention of CSS-pixels. If you specify that something is width:100px in CSS it will be 100 physicals pixels on a normal display but 200 physical pixels on a retina display. A iPhone 3GS and iPhone 4 both have the same dpi (as it is based on pretend CSS-pixels) but very different dppx (as that is based on the real physical pixels).
You can use dppx to detect when a client has a high pixel density screen and serve it a different styling even if the client’s browser pretends like it doesn’t have that high pixel density.
.comp {
background-image: url(image.png);
}
@media only screen and (min-resolution: 2dppx) {
.comp {
background-image: url(image@2x.png);
}
}
More info here on CSS-pixels: https://developer.mozilla.org/en-US/docs/Web/CSS/resolution