Единицы измерения: px, %, em, rem, vw/vh

Разбираемся, чем измерять размеры в CSS, чтобы вёрстка масштабировалась, а не ломалась.

Единицы CSS делятся на абсолютные (px) и относительные (%, em, rem, vw, vh), которые зависят от контекста.

px — пиксели

Самая привычная единица. Один пиксель — фиксированный размер, не зависящий от окружения. Удобна для точных значений: толщины рамок, мелких отступов.

.box {
  border: 1px solid #ccc;
  padding: 16px;
}

Минус: пиксели не подстраиваются. Если пользователь увеличил базовый шрифт в настройках браузера, размеры в px не последуют за ним.

% — проценты от родителя

Процент считается относительно соответствующего размера родителя. Чаще всего применяют для ширины.

.column {
  width: 50%; /* половина ширины родителя */
}

Когда родитель сужается, колонка сужается вместе с ним — основа гибкой вёрстки.

em — относительно шрифта элемента

1em равен текущему размеру шрифта самого элемента. Если font-size 20px, то 1.5em = 30px. Удобно для отступов, которые должны масштабироваться вместе с текстом.

.btn {
  font-size: 18px;
  padding: 0.5em 1em; /* отступы 9px и 18px */
}

Хитрость em — в накоплении: em вложенных элементов умножаются, и в глубокой вложенности легко запутаться. Поэтому для размеров шрифта чаще берут rem.

rem — относительно корня

1rem всегда равен размеру шрифта корневого элемента <html> (по умолчанию 16px). В отличие от em, rem не накапливается — он один на весь документ, поэтому предсказуем.

html { font-size: 16px; }

h1 { font-size: 2rem; }   /* 32px */
p  { font-size: 1rem; }   /* 16px */
small { font-size: 0.875rem; } /* 14px */

Главный плюс: поменяли font-size у html — и весь сайт пропорционально масштабировался. И размеры в rem уважают настройки пользователя, что важно для доступности. rem — рекомендуемый выбор для размеров шрифта.

vw и vh — относительно окна

Единицы вьюпорта: 1vw = 1% ширины окна, 1vh = 1% высоты окна. Полезны для блоков «на весь экран».

.hero {
  height: 100vh; /* ровно высота экрана */
}

Секция-обложка займёт всю высоту окна, какой бы экран ни был. vw часто используют для крупных «резиновых» заголовков, которые растут вместе с шириной экрана.

Памятка

Единица	Относительно чего	Когда
`px`	ничего (абсолютная)	рамки, мелкие точные значения
`%`	размер родителя	гибкая ширина
`em`	шрифт самого элемента	отступы вокруг текста
`rem`	шрифт корня (html)	размеры шрифта, отступы
`vw` / `vh`	ширина / высота окна	блоки на весь экран

Итог

px — абсолютная единица; % — от размера родителя.
em зависит от шрифта элемента и накапливается; rem — от корня и не накапливается.
vw/vh — проценты от ширины/высоты окна; 100vh — высота экрана.