Loading lesson path
Overview
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.
The em and rem units are perfect for creating scalable and responsive websites!
Formula
Relative to the font - size of the parent elementFormula
Relative to the font - size of the root HTML elementFormula
Relative to 1% of the width of the viewport*. 100vw = full width of the viewportFormula
Relative to 1% of the height of the viewport*. 100vh = full height of the viewportFormula
Relative to 1% of viewport's* smaller dimensionFormula
Relative to 1% of viewport's* larger dimension% Relative to the size of the parent element
A fractional unit. 1fr equals 1 part of the available space
Relative to width of the "0" (zero) character
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.
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 */
}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.
Formula
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.
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 */
}