Какие единицы измерения в CSS важны на практике и как их применять?

Основы CSS

Единицы измерения в CSS выбирают по тому, от чего должен зависеть размер: от шрифта, от родителя, от окна или ни от чего.

Основные единицы

`px` — От чего считается: фиксированная; Где применяют: рамки, тени, иконки
`rem` — От чего считается: шрифт html; Где применяют: шрифты, отступы, брейкпоинты
`em` — От чего считается: шрифт элемента; Где применяют: отступы в кнопках и бейджах
`%` — От чего считается: размер родителя; Где применяют: ширины, позиционирование
`vw`, `vh`, `dvh` — От чего считается: окно браузера; Где применяют: полноэкранные блоки
`ch` — От чего считается: ширина символа «0»; Где применяют: ширина текстовых колонок
`fr` — От чего считается: свободное место в Grid; Где применяют: колонки сетки

.title { font-size: clamp(1.5rem, 1rem + 2vw, 3rem); }
.sidebar { width: min(320px, 100%); }
.gap { gap: max(1rem, 2vw); }

Пользователь может увеличить размер шрифта в настройках браузера — значения в rem вырастут вместе с ним, а в px останутся маленькими.

Абсолютная px и относительные rem, em, %, vw/vh, ch, fr; для доступности шрифты задают в rem, а плавные значения — через clamp/min/max.