1rem equals the root font size, so with the browser default of 16 px it is 16 px.

What is the difference between em and rem?

rem is always relative to the root element’s font size, while em is relative to the current element’s inherited font size.

Why does 100vh not work on mobile?

Mobile browsers may show or hide UI bars, so 100vh can be taller than the visible area; use dvh or svh when supported.

Prefer rem for UI type scales; use px only for hairline borders and pixel-precise details.

Updated: 2026-09-01

Unit	Relative to	Typical use
px	Device pixel (CSS pixel)	Borders, precise icons
rem	Root element font-size	Type scale, spacing
em	Parent font-size	Component-local sizing
%	Parent property	Widths, flexible layouts
vw	1% viewport width	Full-bleed sections
vh	1% viewport height	Hero height (mind mobile UI)
vmin / vmax	Smaller/larger viewport side	Square-ish responsive sizing
ch	Width of “0” glyph	Code blocks, monospace fields
ex	x-height of font	Rare fine typography
svh / lvh / dvh	Small/large/dynamic viewport	Mobile browser chrome-safe height

100vh on mobile can include hidden browser chrome — prefer dvh/svh when supported.
User font-size settings affect rem — that is usually desirable for a11y.

What is 1rem in px?: 1rem equals the root font size, so with the browser default of 16 px it is 16 px.
What is the difference between em and rem?: rem is always relative to the root element’s font size, while em is relative to the current element’s inherited font size.
Why does 100vh not work on mobile?: Mobile browsers may show or hide UI bars, so 100vh can be taller than the visible area; use dvh or svh when supported.