How to Measure the Web?
CSS has two types of units: Absolute (always the same) and Relative (change depending on context).
1. Absolute Units
- px (Pixels): Basic unit. 1px is a " dot " on the screen.
- When to use: For small details, thin borders, or when size must be strictly fixed.
2. Relative Units (Basis of Responsiveness)
- % (Percentages): Depend on parent size.
width: 50%— half the container width. - em: Depends on the current element's font. If
font-size: 16px, then1em = 16px, and2em = 32px. - rem (Root EM): Depends on the entire page's font (the
<html>tag). By default this is 16px.- Why this matters: If the user increases the font in the browser (for readability), all elements in
remwill increase proportionally.
- Why this matters: If the user increases the font in the browser (for readability), all elements in
3. Viewport Units (Screen Size)
- vw (Viewport Width): 1vw = 1% of screen width.
- vh (Viewport Height): 1vh = 1% of screen height.
- vmin / vmax: Minimum or maximum between width and height.
4. Mathematics: calc()
The calc() function allows mixing units.
.container {
width: calc(100% - 40px); /* Full width minus side margins */
}
Important
Professional rule: Always set fonts and large margins in rem. This guarantees your layout won't " break " when scaling.