4 min read
•Question 23 of 49easyWhat are CSS Units?
Understanding px, em, rem, %, vh, vw and more.
What You'll Learn
- Absolute vs relative units
- When to use each
- Responsive units
Absolute Units
| Unit | Description |
|---|---|
| px | Pixels |
| pt | Points (print) |
| cm, mm, in | Physical units |
Relative Units
| Unit | Relative To |
|---|---|
| em | Parent font-size |
| rem | Root font-size |
| % | Parent element |
| vw | 1% of viewport width |
| vh | 1% of viewport height |
| vmin | Smaller of vw/vh |
| vmax | Larger of vw/vh |
Examples
styles.cssCSS
html { font-size: 16px; }
.element {
font-size: 1.5rem; /* 24px */
padding: 1em; /* relative to own font-size */
width: 50%; /* half of parent */
height: 100vh; /* full viewport height */
min-height: 50vmin; /* 50% of smaller dimension */
}