Created: 2022-10-10
Relative length units are relative to something else, perhaps the size of the parent element's font, or the size of the viewport. The benefit of using relative units is that with some careful planning you can make it so the size of text or other elements scales relative to everything else on the page
<length> unit value
What relative to it is
emRelative to font size of the parent, typographical properties like font-size property
Relative to font size of the element itself, like width property
Each successive level of nesting gets progressively larger
as each has its font size times its parent's font size.
remFont size of the root element.
Take their sizing from the root element (<html>).
This means that each successive level of nesting does not keep getting large
exx-height of the element's font.
chThe advance measure (width) of the glyph "0" of the element's font.
lhLine height of the element.
rlhLine height of the root element. When used on the [font-size](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) or [line-height](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height) properties of the root element, it refers to the properties' initial value.
vw1vw is equal to 1% of the viewport width
10vw is 10 percent of the width of the viewport
vh1vh is equal to 1% of the viewport height
vmin1% of the Viewport's smaller dimension.
vmax1% of the viewport's larger dimension.
vb1% of the size of the initial containing block in the direction of the root element's block axis.
vi1% of the size of the initial containing block in the direction of the root element's inline axis.
svw, svh1% of the small viewport's width and height, respectively.
lvw, lvh1% of the large viewport's width and height, respectively.
dvw, dvh1% of the dynamic viewport's width and height, respectively.