CSS Relative Units
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
emandremunits 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 */
}
Set Font Size With Rem
The rem unit is relative to the font size of the root HTML element ().
Unlike em, which is relative to the font-size of its parent element, rem always refers to the font-size of the 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 element, all elements sized with rem units will scale proportionally throughout the entire page.
The default font-size of the 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 */
}
