“CSS pixel.” “Reference pixel.” You may call it either one, but a pixel is not what it used to be when we were young.
Retina, Amoled, QuadHD…. You may have noticed that mobile devices have crazy resolutions. And the trend does not stop with mobile devices - take for instance MacBook Pro with Retina display.
However, web designers do not have to worry about displaying their websites using hardware resolutions. Browsers will calculate the resolution and display it in “CSS resolution”.
For the ratio between hardware and CSS resolution, we use a technical term,
device-pixel-ratio or a newer one, resolution. The latter term might be a
little confusing so for the sake of clarity we will use the first one.
