Flash cards
Review the key moves
What is the main idea behind CSS Relative Units?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
___-size: 16px; /* Base font size */Put the learning moves in the order that makes the concept easiest to apply.
Relative units specify a length relative to another length property (like parent element, root element, or viewport).
Relative length units scale better between different screen sizes.
Tip
The em and rem units are perfect for creating scalable and responsive websites!
| Unit | Description |
|---|---|
| em | Relative to the font-size of the parent element |
| rem | Relative to the font-size of the root HTML element |
| vw | Relative to 1% of the width of the viewport*. 100vw = full width of the viewport |
| vh | Relative to 1% of the height of the viewport*. 100vh = full height of the viewport |
| vmin | Relative to 1% of viewport's* smaller dimension |
| vmax | Relative to 1% of viewport's* larger dimension |
| % | Relative to the size of the parent element |
| fr | A fractional unit. 1fr equals 1 part of the available space |
| ch | Relative to width of the "0" (zero) character |
- Viewport = the browser window size. 1vw = 1% of the current width of the browser's viewport. So, if the viewport is 500px wide, 1vw is 5px.
Set Font Size With Em
The em unit is relative to the font size of the parent element. So, if the parent element has a font size of 16px, then 2.5em would result in 40px.
In the following example, the text size in em is the same as the previous example in pixels. However, the em unit allows the user to adjust the text size in the browser settings.
Example
body {
font-size: 16px; /* Base font size */
}
h1 {
font-size: 2.5em; /* 2.5 * 16 = 40px */
}
h2 {
font-size: 1.875em; /* 1.875 * 16 = 30px */
}
p {
font-size: 1em; /* 1 * 16 = 16px */
}Live preview
Set Font Size With Rem
The rem unit is relative to the font size of the root HTML element (<html>).
Unlike em , which is relative to the font-size of its parent element, rem always refers to the font-size of the <html> element, regardless of its position in the document tree. This makes rem very useful for creating scalable and responsive designs. By changing the font-size of the <html> element, all elements sized with rem units will scale proportionally throughout the entire page.
The default font-size of the <html> element in most browsers, is 16px. So, by default, 1rem equals 16px unless explicitly overridden in the CSS.
Example
html {
font-size: 16px; /* Set the root font size */
}
h1 {
font-size: 2.5rem; /* 2.5 * 16 = 40px */
}
h2 {
font-size: 1.875rem; /* 1.875 * 16 = 30px */
}
p {
font-size: 1rem; /* 1 * 16 = 16px */
}Live preview