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

With the "popularization" of the Retina 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 can not figure things out right ...

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

I noticed that in DevTools itself there is an option to simulate Device Pixel Ratio. But I did not see anything change on the screen ...