What relative units of measurement exist in CSS?
Relative units in CSS are units that depend on the font size, the browser window size, or other parameters of the element/window. They are flexible and help create responsive layouts.
Groups of relative units
1. Relative to font
| Unit | Relative to |
|---|---|
em | parent's font size |
rem | root element's font size (html) |
ex | the height of the letter x in the current font |
ch | the width of the 0 character in the current font |
Example:
css
p { font-size: 2em; } /* 2 times larger than the parent */2. Relative to window size (viewport)
| Unit | What it means |
|---|---|
vw | 1vw = 1% of window width |
vh | 1vh = 1% of window height |
vmin | 1% of the smaller side (width or height) |
vmax | 1% of the larger side |
Used for responsive blocks and fonts, for example:
css
h1 { font-size: 5vw; } /* font size depends on window width */3. Percentage
| Unit | Description |
|---|---|
% | depends on the parent element (for width, height, spacing, and so on) |
Summary
| Group | Units | When to use |
|---|---|---|
| Font-based | em, rem, ex, ch | for text, spacing, responsive interfaces |
| Browser window | vw, vh, vmin, vmax | responsive blocks/headings |
| Percentage | % | sizes dependent on the container |
The most commonly used in practice: rem, em, %, vw, vh.
Short Answer
Interview readyPremium
A concise answer to help you respond confidently on this topic during an interview.