Relative units solve different problems: rem follows root font size, percentages follow a reference dimension, and viewport units follow viewport sizing.
Before you start
You should be comfortable with semantic HTML, CSS selectors and browser developer tools. Reproduce the scenario in a small page before adding framework code. Inspect both visual appearance and keyboard or accessibility behavior; a correct screenshot alone is not sufficient evidence.
The practical goal is to reason through this situation: Use rem for readable spacing and max-width for a text column instead of shrinking all text on narrow screens. Read the walkthrough first, then try the interview exercise before opening its answer. The important part is explaining the decision and its consequences, rather than remembering a definition alone.
Step-by-step walkthrough
Step 1: Choose each reference frame
Rem follows root font size; percentages and viewport units depend on different reference dimensions.
Step 2: Constrain readable content
Use a maximum text width and flexible side padding instead of shrinking text to fit every screen.
Step 3: Test user preferences
Increase text size and zoom. Layout should accommodate those changes without hiding content or disabling scaling.
Worked scenario
Use rem for readable spacing and max-width for a text column instead of shrinking all text on narrow screens.
article { max-width: 65ch; margin-inline: auto; padding-inline: 1rem; }The character-based maximum targets readable line length; rem padding responds to root text sizing. This is a starting point, not a guarantee for every font. A percentage height additionally needs a suitable containing-height context.
Common mistake
A percentage height may lack a definite containing height.
Verify the behavior
Test mobile width, wide desktop, zoom and increased root font size. Check line length, overflow and access to controls.
Interview exercise
Choose a readable article width.
Answer and reasoning
Limit line length with a suitable max-width and allow padding to adapt without reducing user-selected text size.
Continue learning
Compare the scenario with the HTML and CSS interview questions and test your understanding with the HTML and CSS MCQs. For terminology and implementation details, consult the reference material.