28 Sept 2026, 05:15 - A CSS Pixel Isn't a True Pixel

A ‘pixel’ in CSS is not a true pixel as makes up a display.

A pixel in CSS is quite a complex unit, as is explained in CSS Values and Units Module Level 3. A CSS pixel is relative to the reference pixel:

The reference pixel is the visual angle of one pixel on a device with a device pixel density of 96dpi and a distance from the reader of an arm’s length. For a nominal arm’s length of 28 inches, the visual angle is therefore about 0.0213 degrees. For reading at arm’s length, 1px thus corresponds to about 0.26 mm (1/96 inch).

As far as is needed for development in most cases, a CSS pixel can just be understood to vary a bit between displays. As printed output, of course, doesn’t have pixels, a CSS pixel in print represents 1⁄96^th of an inch.

Using ECMAScript’s devicePixelRatio, the size of a pixel on your display relative to a CSS pixel is unknown. Note that this figure may be unreliable if zoomed in Safari.

Using actual pixels has many issues. One of the most blatant is that many websites would slowly shrink as display technology improves and pixels themselves become steadily smaller. It’d also work oddly with zooming (do you scale a pixel, or leave as is?). Another is that it’d make sites much harder to author and would make responsive design much harder.