CSS pixels are logical pixels used in CSS declarations such as width: 300px or font-size: 14px.
An element with width: 300px is always exactly 300 CSS pixels wide
CSS pixels are not the actual pixel density of the device. If the user zooms in, an element with width: 300px takes up more and more of the screen, and thus becomes wider and wider when measured in device (physical) pixels. In CSS pixels, however, the width remains 300px, and the zooming effect is created by expanding CSS pixels as much as is needed.
The device pixel ratio (also called CSS Pixel Ratio) is what determines how a device's screen resolution is interpreted by the CSS.