What is the difference between device pixels (physical pixels) and layout pixels (reference pixels, CSS pixels, or points)?

The device pixel is the actual physical pixel on the device's screen. The layout pixel is the amount of pixels an image will take when it is represented in the device's screen. We can can have a 2:1 ratio between the device pixels and the layout pixels (each image pixel will take 2 physical pixels on the screen, so the image is being "scaled up"). This ratio is called device-pixel-ratio, which is represented as 1x, 1.5x. 1.7x, 2x, 3x, etc.