CSS Units (px, rem, em, %, vh, vw)

Definition

CSS provides various units of measurement to express length. They are divided into absolute units (like `px`) and relative units (like `%` and `rem`).

Explain Like I'm New

`px` is absolute: a 16px font is always exactly 16 pixels regardless of screen size. `%`, `vw`, and `rem` are relative. If you say `width: 50%`, it means half of whatever the parent container's size is. This is the absolute foundation of making websites mobile-friendly.

Real World Example

Setting a hero banner to `height: 100vh;` means it will always perfectly fill 100% of the Viewer's screen Height, whether they are on a massive TV or a tiny iPhone.

Common Use Cases

•Responsive typography
•Fluid layouts

Interactive Example

Interview Questions

basic

What is the difference between `vh` and `vw`?

intermediate

Why is `rem` preferred over `px` for font sizes?

Flash Cards

Question

vh vs vw?

Click to reveal answer

Answer

`vh` stands for Viewport Height (1vh = 1% of the screen's height). `vw` stands for Viewport Width.

Question

rem vs px?

Click to reveal answer

Answer

`rem` (Root EM) scales based on the user's browser settings. If a visually impaired user changes their default browser font size from 16px to 24px, `rem` units will scale your entire website up proportionally. `px` ignores the user's settings and stays fixed, which is terrible for accessibility.