In CSS what is the difference between Pixel Density and Pixel Ratio? How does DPI, DPCM and DPPX work

Question

With the "popularization" of retinal screens, mainly on Apple devices, I have seen some people using media queries with measures like:

@media (-webkit-min-device-pixel-ratio: 2) { ... }
@media (min-resolution: 2dppx) { ... }

But I still don’t quite understand some things...

• Is there any difference between Pixel Density and Pixel Ratio?
• What’s the difference between DPI, DPCM and DPPX how should I use them?

I noticed that in Devtools itself there is an option to simulate the Device Pixel Ratio. But I didn’t see anything change on the screen...

Answer 1

Pixel Density refers to how many pixels fit in a given fixed space and is most often reported as ppi (pixels per inch) or dpi (dots per inch). We use the term pixel ratio when you are dealing with high density displays, it serves to specify how a physical pixel would compare to a pixel of 'normal' density' (100ppi-200ppi)

• DPI: Points per inch
• DPCM: Points per centimeter
• DPPX: Points per pixel