% is a relative unit based on the parent element’s dimensions. Use it to size containers, position elements, or fill bars based on dynamic proportions.

em sizes are relative to their parent’s font size. If a parent is 12px, then 1em = 12px and 2em = 24px. Nested em values multiply, so they can grow fast.

rem sizes are relative to the root element’s font size, not their parent. If the root is 10px, then 1rem = 10px and 2rem = 20px anywhere on the page.

ch is based on the width of the character "0" in the current font. 1ch = the width of one "0", 10ch = ten zeros wide. It’s great for sizing inputs and aligning type.

Viewport height (vh) is generally used to set the height of layouts or elements by controlling what percentage of the visible screen they take up, the below example showcases 10vh and 20vh.

vw stands for viewport width, 1vw equals 1% of the browser window's width, making it useful for responsive layouts that scale with the screen size.

vmin is a relative unit that equals 1% of the smaller value between the viewport’s width and height, making it useful for responsive designs that adapt to limited screen dimensions, with the below examples showcasing a sword with widths of 5vmin and 10vmin respectively.

vmax is a relative unit that equals 1% of the larger value between the viewport’s width and height, making it ideal for scaling elements on spacious screens, with the below examples showcasing a treasure chest with widths of 2vmax and 8vmax respectively.