Actually, CSS does already work almost the way you described. For devices where the anchor unit is px, a CSS length of 1px is not defined in terms of a single p

Actually, CSS does already work almost the way you described. For devices where the anchor unit is px, a CSS length of 1px is not defined in terms of a single physical pixel on a screen but is instead an angular unit. More specifically, in CSS 2.1, a “reference pixel” has an angle that corresponds to one physical pixel on a 96dpi display at a nominal arm’s length distance of 28in. A measurement of 1px is then recommended to refer to the whole number of device pixels that best approximates the reference pixel. In principle, that means whether you’re holding a phone or tablet with a Retina-class display relatively close, looking at a traditional large format desktop screen with fewer pixels-per-inch, or looking at a projected screen from a typical viewing distance in a lecture theatre, sizing in terms of px should still have approximately the same effect. However, you do still have a difference of up to 1/3 of the nominal size to contend with: a browser running on a device where a physical pixel is around 150% the size of a nominal reference pixel has to choose whether to use 1 or 2 display pixels for each px, resulting in output that is either 2/3 or 4/3 of the theoretical ideal size. I’ve been assuming this is part of the reason we see so many blogs currently displaying irritatingly large body text if they’re viewed on a desktop or laptop screen: the designers found that a more traditional font-size was too small for comfortable reading on whatever mobile device they were using at the distance they prefer to hold it, so they increased it. For more on the CSS px definition, you can check the W3C spec: https://www.w3.org/TR/CSS21/syndata.html#length-units https://www.w3.org/TR/CSS21/syndata.html#length-units