Junior (0-2 years)HTML & CSS
What is the difference between em, rem, %, vh and vw in CSS?
Quick answer
em is relative to the parent font size, rem is relative to the root font size, % is relative to the parent’s relevant size, and vh/vw are 1% of the viewport height or width.
rem is the default choice for type and spacing because it stays predictable when components nest. em compounds: a 1.2em padding inside a 1.2em heading is larger than you think. % on width is the parent’s width; % on height only works if the parent has an explicit height.
100vh is the full viewport height, which on mobile can include the area hidden by the browser chrome and cause jumpiness. Newer units such as svh, lvh and dvh address that. For fluid type, clamp(1rem, 2vw, 2rem) is a common pattern.