Единицы измерения в CSS

px, %, rem, em, vw/vh, dvh, svh, ch, clamp: что выбрать для размеров шрифта, отступов и ширины, чтобы сайт масштабировался.

Уровень: начальный 11 разделов 1,5 часа

1. Абсолютные и относительные единицы

Абсолютные — px (и реже cm/in/pt): стабильны, привычны. Относительные привязаны к чему-то: к размеру шрифта родителя (em), корня (rem), вьюпорту (vw/vh) или ширине родителя (%). Выбор единицы — это выбор «к чему масштабироваться».

Размеры в px — точны; rem — масштабируются настройкой шрифта пользователя; процент — от родителя; vw/vh — от окна. Разные задачи — разные единицы.

2. rem — размер против корня

1rem равен размеру шрифта (по умолчанию 16px). Если пользователь увеличивает шрифт в настройках — весь интерфейс, заданный в rem, растёт вместе с ним. Это база доступности и адаптивности.

html { font-size: 16px; }   /* умолчание, можно и не писать */

.post { font-size: 1rem; }    /* 16px */
.post { font-size: 1.125rem; }/* 18px */
.post { margin: 2rem; }       /* 32px — отступ повторит размер шрифта */

rem — от корневого шрифта, поэтому настройка шрифта масштабирует всё;
удобно для границ и отступов UI, не только текста;
в head можно поднять html-шрифт: media-переменные для больших экранов.

3. em — от родителя

1em равен текущему размеру шрифта элемента: если шрифт 20px, то 0.5em = 10px. Удобно для внутренних отступов «в тон к тексту»: поменяли кнопку на крупнее — padding подтянулся сам.

.btn {
  font-size: 18px;
  padding: 0.6em 1.4em;   /* 10.8px 25.2px — зависит от шрифта */
  border-radius: 0.4em;
}

/* em в margin наследует шрифт самого элемента, в font-size элемента — шрифт родителя */

Вложенные em «умножаются»: если у родителя 0.9em, у родителя родителя своё — итог сложно предсказать. Поэтому em применяют локально, а масштаб — через rem.

4. Проценты

Процент — от родителя: width: 50% — половина ширины, font-size: 120% — в 1.2 раза больше шрифта родителя. Percentage-отступы паддинга считаются от ширины родителя, что даёт классический трюк с aspect-ratio.

.container { width: 80%; }          /* от блока-родителя */
.title { font-size: 140%; }         /* в 1.4 раза больше базового */
.thumb { padding-bottom: 100%; }    /* квадрат без aspect-ratio (старое) */

проценты перекликаются с блочной моделью — легко перепутать с vw;
процент сдвига translate() — от СВОИХ размеров, а не родителя.

5. vw/vh и реальный вьюпорт

1vw = 1% ширины окна, 1vh = 1% высоты. Подходит для «крупного» текста в hero-блоках: заголовок 8vw — от 5 крупного до 9 экрано-насыщенного. Но у vh есть подвох: на мобильных адресные полосы меняют видимую высоту.

.hero { min-height: 100vh; }   /* без учёта мобильной панели */
.hero { min-height: 100svh; }   /* svh — малая стабильная высота */
.hero { min-height: 100dvh; }   /* dvh — «динамическая» реальная */

На мобильных 100vh бывает больше видимой области (прячется панель). svh/dvh точнее. Для обычных страниц min-height: 100svh уже норма.

6. ch и другие типографские

1ch — ширина символа «0» текущего шрифта: им задают длину строки (max-width: 65ch);
ex — высота строчной буквы «x» (редко);
cap — высота заглавной буквы;
ic — ширина иероглифа для CJK-текстов.

.prose { max-width: 68ch; }   /* строка ~ 68-90 символов — читается легче */

Длина строки в — база типографики: слишком длинная строка утомляет. ch подходит для газетно-книжной верстки.

7. Функции: clamp, min, max

clamp(MIN, ЖЕЛАЕМЫЙ, MAX) даёт плавное значение между границами: шрифт растёт вместе с экраном, но не выходит за пределы. Это «резиновая типографика» за одну строку.

.hero__title { font-size: clamp(1.8rem, 1rem + 3vw, 4rem); }
.space { padding: clamp(1rem, 0.5rem + 2vw, 2rem); }

/* min(100%, 1200px) — контейнер не шире экрана и не шире 1200px */
.wrapper { width: min(100%, 1200px); }

clamp в сводках шрифтов — бесшовный вариант media queries;
min/max можно складывать: min(100%, 1200px);
без опасения поддерживатся во всех современных браузерах.

8. Что выбирать на практике

Задача	Рекомендация
размер шрифта	rem (или clamp)
внутренние отступы	rem/em по вкусу
границы и рамки	px
ширина блоков	%/min(content, …) — редко px
полная высота экрана	svh/dvh
крупный заголовок	clamp
длина строки	ch

9. Служебные единицы

deg/turn/rad — углы (transform, градиенты);
s/ms — время (transition, animation);
%= фоновые позиции и спродвинутые преобразования;
fr — доступ в grid (не проценты!);
cqw/cqh — сдвиг контейнерных запросов.

Запоминайте не список, а вопрос «от чего зависит?», и тогда выбор единицы — механическое следствие.

10. Проценты против fr в grid

grid-template-columns: 25% 25% 25% 25% жёстко; fr гибко делит оставшееся место. fr создаёт «остаток» при сжатии/растяжении, % — фиксированные доли.

.many { grid-template-columns: 1fr 1fr 1fr 1fr; }
.ratio { grid-template-columns: 30% 70%; }
/* что выбрать: fr — под растекающиеся колонки, % — под фикс-пропорцию */

11. Чек-лист единиц

шрифты в rem/clamp, рамки в px — база;
vh не гонится на мобильных — svh/dvh;
ch для длины строки текста;
clamp заменил многие медиазапросы для шрифтов;
fr в grid, а не % колонки с контентом;
проценты у отступов — только осознанно.

Что дальше

Курс завершён.

← Вернуться к курсам