Units, with every assumption stated
A relative unit has no fixed value. This shows which of your settings each answer depends on, rather than presenting a number as though it were absolute.
Units, with every assumption stated
A relative unit has no fixed value. This shows which of your settings each answer depends on, rather than presenting a number as though it were absolute.
The same value in every unit
Density-independent pixels and screen density
A CSS pixel is not a device pixel
The CSS px is an anchored unit: 1/96 of an inch at a normal viewing distance, not one physical dot. On a high-density screen one CSS px covers several device pixels, and how many is the browser's business.
That is why the absolute units — in, cm, mm, pt, pc, Q — all convert to px by fixed ratios and none of them tell you a physical size on screen. They mean what they say on paper.
Android's dp is defined against 160 dpi, so it needs the density of the device you are targeting. There is no sensible default and this does not invent one.
rem, em and the cascade
rem is relative to the root element's font size, which is one number for the whole page and the number a reader changes in their browser settings.
em is relative to the element's own font size, which means nesting compounds: an em padding inside an em-sized element inside another one is three multiplications deep and rarely what anyone intended.
Set sizes in rem, not px
A font size in px does not respond to the browser's font-size setting. Someone who has set 20px because 16 is too small still gets 16, and there is nothing they can do about it short of zooming the whole page.