[WEB] Which unit has the same value and result to any devices?

Question

In my years of coding, I can't exactly find the HTML/CSS unit that would have exact the same size of elements. Just like the font-size, I tried the em unit because some says that it has the same value to any devices but I tried to use a smaller devices and it appears large and the texts are overlapping. Anyone who could suggest?

Answer 1

The problem with the em unit is that it depends on the font size of its parent element. The correct thing would be to use rem, as suggested by Kaimi, which is equivalent to 16px which is the default size that browsers assign to fonts (unless you change the size in the root element)

Answer 2

There isn't a magical unit as the concentration of pixels per square unit varies across devices and may be disproportionate between the vertical and the horizontal. In website land, we rely on user agents to do the heavy lifting of calculating a rough translator to compensate for this.

'Pixels are perhaps best thought of as "device pixels" as this length doesn't have anything to do with the literal screen pixels in the display you are looking at. It's actually an angular measurement.

It is supposed to be a value that is normalized across devices and displays, but that increasingly isn't true anymore.'

The rest of the article gives a good overview of the different units ("absolute" and relative and odd ball, even though everything is essentially relative).

https://css-tricks.com/the-lengths-of-css/

The cited/referenced article describes the nitty gritty about dpi/ppi.

http://inamidst.com/stuff/notes/csspx

Rough science/art.