Переменные единицы

Пиксель в CSS всегда равен одному и тому же условному отрезку. Все остальные единицы, кроме нескольких физических вроде cm и pt, — переменные: сами по себе они ничего не значат, пока браузер не узнает базу для расчёта. 2em внутри мелкой подписи и внутри крупного заголовка — разные длины. На этом и строится гибкая вёрстка: размеры задают отношением к чему-то, а не числом пикселей. Общая классификация всех единиц дана в статье «Единица измерения», а здесь — подробнее о группах переменных единиц.

Группы по базе расчёта

• От шрифта элемента: em — размер шрифта, ex — высота строчной буквы, ch — ширина цифры «0», lh — высота строки.
• От шрифта корневого элемента: rem и rlh. Не накапливаются при вложенности, поэтому удобны для отступов и размеров текста.
• От области просмотра: vw, vh, vmin, vmax и мобильные варианты svh, lvh, dvh.
• От контейнера: cqw, cqh, cqi, cqb — работают внутри элемента, объявленного контейнером через container-type.
• Проценты — отдельный случай: база зависит от свойства. Для width это ширина родителя, для font-size — шрифт родителя.

Пример сочетания

.article { max-width: 65ch; }          /* удобная длина строки */
.article p { margin-block: 0 1lh; }    /* отступ = одна строка */

.card { container-type: inline-size; }
.card h3 { font-size: clamp(1rem, 4cqi, 1.5rem); }

h1 { font-size: clamp(1.75rem, 1rem + 2.5vw, 3rem); }

Ширина колонки текста ограничена числом символов, заголовок карточки зависит от ширины самой карточки, а главный заголовок — от окна, но в пределах минимума и максимума.

На чём спотыкаются

• Накопление em. Вложенный список со шрифтом 0.9em на третьем уровне получает 0,73 от исходного размера. Для шрифтов надёжнее rem, а em оставляют для отступов, которые должны расти вместе с текстом кнопки.
• Размер шрифта только в vw. Такой текст не увеличивается при масштабировании страницы, а это требование доступности. В clamp() к vw добавляют rem, как в примере.
• Единицы контейнера без контейнера. Если у предка нет container-type, cqi считается от окна — результат похож на правильный, и ошибку легко не заметить.