px |
Абсолютная |
Один CSS‑пиксель (~1/96 дюйма) |
Пиксель‑perfect-иконки, чёткие границы, точная фиксация размеров |
cm, mm, in, pt, pc, q |
Абсолютная |
Печатные единицы (1 in = 2.54 cm; 1 pt = 1/72 in и т.п.) |
Печатные макеты (PDF, печать), задания в физических единицах |
em |
Относительная |
Размер шрифта родителя |
Компоненты, которые должны масштабироваться вместе с родительским элементом |
rem |
Относительная |
Размер шрифта корня (html) |
Базовая типографика: размеры шрифтов, отступы, кнопки, заголовки |
% |
Относительная |
Процент от значения родителя (ширина/высота и т.д.) |
Гибкие контейнеры и сетки, адаптивные отступы, резиновая вёрстка |
ch, ex |
Относительная |
Ширина символа “0” и x-height используемого шрифта (высота символа «x») |
Тонкая настройка ширины полей ввода, выравнивание по текстовым метрикам |
vw, vh |
Viewport‑единицы |
1 vw = 1 % от ширины окна; 1 vh = 1 % от высоты окна |
Фуллскрин-секции, масштабирование крупных блоков и фоновых изображений |
vmin, vmax |
Viewport‑единицы |
Минимум/максимум из vw и vh |
Элементы, которые должны подстраиваться по меньшей или большей стороне окна |
dvw, dvh, dvmin, dvmax |
Динамические viewport |
Учитывают UI браузера (адресная строка на мобилках) |
Мобильные полноэкранные секции без «скачков» из‑за скрытия/появления UI браузера. Подробнее в посте |
fr |
Grid‑единица |
Доля свободного пространства в CSS Grid |
Распределение пространства между колонками/строками в сетке |
lh, rlh |
Специальные |
Единицы для контроля межстрочного интервала |
Экспериментальные кейсы, когда нужен точный контроль над высотой строки. Подробнее в посте |