CSS - Pixel (Logical Pixel)


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.

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

Documentation / Reference

Powered by ComboStrap