px ≠ pixels
Device pixels ≠ browser px ≠ image px
Thanks to Apple, CSS and HTML pixels (
px) almost always map to multiple device/printer pixels. The devicePixelRatio on my phone is 3.875; what’s yours?
My desktop devicePixelRatio changes on browser zoom, but defaults to 1.5 (my
System > Display > Scale is 150%, after all).
Image files (excluding SVG) decode to a grid of pixels. It’s annoyingly hard to get image pixels to display perfectly at a 1:1 ratio with device pixels - but with
Other absolute units (in, pc, pt, mm, cm, Q) are defined in terms of number of CSS pixels and pretend everything is 96dpi. Devs avoid absolute units because it’s generally better to use units that are derived from the font size or the viewport/container dimensions. Mismatched units can break a layout if the user adjusts their
Accessibility > Text Sizemultiplier, zooms the browser, or rotates their device. Needless to say, you should do all of these things before shipping your site.