:O... On modern displays, a browser pixel can span multiple display dots. Well, that sure demystifies layouts acting strange sometimes.

tmyk

I don’t know about browsers but on platforms like windows, macos, ios and android, those units are not called pixels.
In iOS for example you work with "points", not pixels.
1 point can be exactly 1 pixel on an old device with a screen with low pixel density.
Modern high resolution, high density displays can have up to 3 pixels in one point of length (or 3x3 pixels per point area).

In browsers, iirc you also have different units, but I‘m not sure about a standard way of developing purely in pixel independent units.
It wouldn’t surprise me if the answer is "somewhat yes, but not really"

What you call display dots are the actual pixels.
If in web dev the convention is to call pixels something that can span multiple physical dots on the monitor, it’s a horrible mistake and would only lead to more confusion.
Which also wouldn’t surprise me a bit.

@Lensflare Yes, I studied various measurement units, including points, in Art School and I'm familiar with it from working with PDF manipulation on the job as well.

And so, if I recall, this is why we work with em rather than px in CSS.. and Figma worked with points as well. I got the term 'display dots' from a book on JavaScript.

@CaptainRant em is relative to the parent font size. Also pixels in css has problems with accessibility webbrowser tools from what I have heard (did not doublecheck). Em or rem or vw/vh should be the way to go

@CaptainRant haha, Art School :p

@wojtek322 is there something else which actually depends on the screen device’s pixel density rather than on font size or viewport relative size?

Because normally UI (like icons for example) should look "the same size" on any screen, no matter the screen size, pixel density or font.

@Lensflare Unsure, css units are a mess; cm, mm, in, px, pt, pc, em, ex, ch, rem, vw, vh, vmin, vmax, percentages.

No idea why we need that many