: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

@wojtek322 cm, mm? No way :p Would've been awesome if you could do it in metric. Also in meters would be amazing.

@whimsical theoretically cm and mm should be pixel density independent.
I mean that is essentially the idea of dpi: relating real units of length to pixels on the screen.
But we are talking about web and css, so…

@CaptainRant Just wait until you get into the world of font rendering, then the location of the red, green and blue lights in your monitor matters ;P

@wojtek322 I tried so hard to beat this into the junior but react made him not care because that shit-can only works with px by default