⚡ Кратко
Единицы делятся на абсолютные (px — не зависит ни от чего) и относительные (em, rem, %, vw, vh, ch — пересчитываются от шрифта, родителя или окна).
Абсолютные единицы
| Единица | Относительно чего | Когда использовать |
|---|
px | Ни от чего (фиксированный пиксель) | Рамки, тени, мелкие детали, которые не должны масштабироваться. |
Относительные единицы
| Единица | Относительно чего | Когда использовать |
|---|
rem | font-size корня <html> (по умолч. 16px) | Шрифт, отступы, сетки — не зависит от вложенности. |
em | font-size текущего элемента | Внутренние размеры компонента (padding кнопки). |
% | Соответствующий размер родителя | Резиновые ширины колонок и блоков. |
vw / vh | 1% ширины / высоты окна | Крупные секции на весь экран (с осторожностью для текста). |
ch | Ширина символа «0» | Ограничение длины строки: max-width: 70ch. |
Функции для адаптивных значений
| Конструкция | Что делает |
|---|
min(a, b) | Берёт меньшее из значений. |
max(a, b) | Берёт большее из значений. |
clamp(min, идеал, max) | Тянется вместе с экраном, но не выходит за границы. |