OnlineCBT
Choose the reference behind a relative unit
A relative unit is meaningful only when you know what it is relative to. rem relates to the root font size. em is font-relative, with special behavior for font-size itself. Percentages depend on the property and containing context. Viewport units relate to viewport dimensions.
.article { width: 90%; max-width: 65ch; margin-inline: auto; }
h1 { font-size: 2rem; }
.button { font-size: 1rem; padding: 0.6em 1em; }
.hero { min-height: 60vh; }The button's padding scales with its own text size. The heading scales with the root font size. The article's percentage width relates to its containing block in this width context, not necessarily the entire screen.
em can compound
For font-size, 1.2em relates to the inherited font size. Nested elements each set to 1.2em can multiply sizes. rem is useful when several levels should reference one root scale. Do not force the root to a tiny fixed value just to make arithmetic convenient.
Viewport caveats
vw and vh track viewport width and height units. On mobile browsers, visible viewport space can change as browser controls appear or disappear. Newer small, large and dynamic viewport units address different interpretations; test support and provide a sensible fallback. A fixed 100vh panel can obscure content in some mobile situations.
Percentages are property-specific
A percentage height needs an appropriate definite reference size to behave as expected. Percentage padding has its own resolution rules. Avoid treating every percentage as “that fraction of the parent in the same direction”. Consult the property's definition when a result seems surprising.
Practice
- Increase the root font size and observe rem-based headings.
- Nest three elements using 1.2em font-size, then compare rem.
- Place a 90%-width card in a narrow sidebar and note that it follows the sidebar.
- Test a viewport-height panel on mobile with browser controls expanded and collapsed, ensuring content can still scroll.
