Все единицы CSS: абсолютные, относительные к шрифту, относительные к вьюпорту, функции плавных значений, а также единицы угла, времени и разрешения — относительно чего измеряется каждая и когда её стоит выбрать.
Абсолютные единицы (px, pt) сохраняют фиксированный размер независимо от контекста; относительные единицы (rem, vw, %) масштабируются относительно опорного значения. Для размеров шрифта выбирайте rem: он учитывает настроенный пользователем корневой размер шрифта, поэтому ваша типографика уважает его настройку доступности. Используйте clamp() для плавной типографики, которая растёт и сжимается вместе с вьюпортом, никогда не выходя за нижнюю или верхнюю границу.
Справочная таблица · 38 записи
Единицы CSSExplained
38 of 38 rows
Абсолютные
1/96 дюйма (опорный пиксель CSS).
Фиксированные размеры интерфейса: рамки, тонкие линии, размеры иконок.
border: 1px solid #000;
1/72 дюйма (1pt = 1.333px).
Стили для печати, где размеры соответствуют физической бумаге.
font-size: 12pt;
1 сантиметр (≈37.8px).
Печатные макеты, которым нужны реальные размеры.
margin: 2cm;
1 миллиметр (≈3.78px).
Точные измерения в печати.
padding: 5mm;
1 дюйм (96px = 2.54cm).
Печатные макеты с размерами в дюймах.
margin: 1in;
Относительные к шрифту
Собственный размер шрифта элемента (унаследованный от родителя).
Отступы, масштабируемые вместе с окружающим текстом.
padding: 1em;
Размер шрифта корневого элемента (элемент html).
Размеры шрифта: учитывает пользовательскую настройку корневого размера шрифта.
font-size: 1.25rem;
Ширина глифа '0' в текущем шрифте.
Задать читаемую длину строки (символов на строку).
max-width: 70ch;
Высота строчных знаков (x-высота) текущего шрифта (высота строчной 'x').
Вертикальные метрики, привязанные к гарнитуре.
line-height: 2ex;
Высота прописных букв текущего шрифта (высота заглавной буквы).
Вертикальные метрики по заглавным буквам, плотнее чем ex.
padding-top: 0.5cap;
Ширина идеограммы '水' (вода) в текущем шрифте.
Размеры, отслеживающие одну ячейку CJK-символа.
width: 4ic;
Собственная вычисленная высота строки элемента.
Задавайте размеры элементам в целых строках текста.
height: 3lh;
Высота строки корневого элемента.
Отступы, кратные базовой высоте строки документа.
margin-block: 2rlh;
Относительные к вьюпорту
Значение того же свойства у родителя.
Резиновые макеты, размер которых задан относительно родительского элемента.
width: 50%;
1% ширины вьюпорта.
Полноширинные секции по ширине экрана.
width: 100vw;
1% высоты вьюпорта.
Секции-герои или оверлеи на всю высоту экрана.
height: 100vh;
1% меньшей стороны вьюпорта.
Размеры элементов, вписывающихся в экран при любой ориентации.
font-size: 5vmin;
1% большей стороны вьюпорта.
Заполнение доминирующей оси вьюпорта.
font-size: 5vmax;
1% малой высоты вьюпорта (интерфейс браузера полностью показан).
Мобильные секции на всю высоту, помещающиеся над развёрнутым интерфейсом браузера.
height: 100svh;
1% большой высоты вьюпорта (интерфейс браузера скрыт).
Фоны, обязанные закрывать экран даже при свёрнутом интерфейсе браузера.
height: 100lvh;
1% динамической высоты вьюпорта, отслеживающей интерфейс браузера при его появлении и скрытии.
Мобильное решение для 100vh: высота меняется при появлении интерфейса браузера.
height: 100dvh;
1% малой ширины вьюпорта.
Аналог svh по ширине для самого узкого состояния вьюпорта.
width: 100svw;
1% большой ширины вьюпорта.
Аналог lvh по ширине для самого широкого состояния вьюпорта.
width: 100lvw;
1% динамической ширины вьюпорта, отслеживающей интерфейс браузера.
Аналог dvh по ширине, когда вьюпорт меняется вместе с интерфейсом.
width: 100dvw;
1% размера вьюпорта вдоль строчной оси (ширина при горизонтальном письме).
Размеры относительно вьюпорта, следующие направлению письма.
width: 50vi;
1% размера вьюпорта вдоль блочной оси (высота при горизонтальном письме).
Размеры относительно вьюпорта, верные и при вертикальном письме.
height: 50vb;
Плавные
Предпочтительное значение, ограниченное минимумом и максимумом.
Плавная типографика, никогда не выходящая за нижнюю или верхнюю границу.
width: clamp(320px, 80vw, 1100px);
Наименьший из аргументов, разделённых запятыми.
Ограничьте размер, чтобы он никогда не превышал максимум.
width: min(100%, 600px);
Наибольший из аргументов, разделённых запятыми.
Гарантия минимального размера, растущего вместе с вьюпортом.
width: max(50%, 300px);
Угол
1/360 полной окружности.
Трансформации поворота и угловые позиции в градиентах.
transform: rotate(45deg);
Радианы; 1rad ≈ 57.2958deg.
Углы, вычисленные математически, например генерируемые трансформации.
transform: rotate(1.5708rad);
Грады; 400grad = полная окружность.
Устаревшие или геодезические значения углов.
transform: rotate(100grad);
1turn = один полный оборот 360°.
Полные и полуобороты, читаемые с первого взгляда.
transform: rotate(0.5turn);
Время
Одна секунда.
Длительности анимаций и переходов.
transition: opacity 0.3s;
Одна миллисекунда (1s = 1000ms).
Короткие анимации отклика интерфейса и задержки.
animation-duration: 150ms;
Разрешение
Точек на дюйм вывода.
Медиазапросы разрешения для печати.
@media (min-resolution: 300dpi)
Точек на единицу px; 1dppx равен стандартному экрану 96dpi.