Relative Units
Compare px, %, em, rem, vw, and vh — learn when to use each unit for responsive layouts.
Step 1 of 6
Pixels: the fixed unit
The px unit is absolute — 16px is always 16px, whether you're on a phone or a 4K monitor. This is great for things that should never change size, like borders (1px solid black) or small icon dimensions. But for layout widths, font sizes, and spacing, fixed pixels create problems. A sidebar set to width: 300px works fine on a 1920px desktop but takes up 80% of a 375px phone screen, leaving almost no room for content. That's why responsive design uses relative units — values that calculate their size based on something else (the parent element, the root font size, or the viewport). The trick is knowing which relative unit to use for which job.
Think of it this way: Pixels are like measuring in centimeters on paper — the measurement is always the same regardless of how large the paper is. Percentages are like saying 'half the page' — on a small page that's small, on a large page that's large. Responsive design needs measurements that stretch and shrink with the page, not fixed rulers.
Web Standard
A CSS pixel is not the same as a device pixel. On a 2x Retina display, one CSS pixel maps to four device pixels (2 wide x 2 tall). The browser handles this scaling automatically. When we say '16px', we mean 16 CSS pixels — a consistent logical unit across all devices.
Learn more on MDN
CSSREAD ONLY
PREVIEW