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.
Css pixel to metre scale
The device pixel ratio (also called CSS Pixel Ratio) is what determines how a device's screen resolution is interpreted by the CSS.
Css Pixel to Rem
- If the root Font-size (rem) is set to 16px (The default)
- then 40 px is equal to 2.5 rem