Единицы измерения CSS: px, rem, em, %, vw и другие

В CSS нет одной «правильной» единицы для всех случаев. Выбор зависит от того, относительно чего должен меняться размер: корневого шрифта, родительского элемента, контейнера или viewport.

Практичное правило: используйте единицу, которая выражает нужную связь. Рамка может оставаться 1px, текст — масштабироваться в rem, ширина — ограничиваться процентом и max-width, а колонки Grid — делить свободное место через fr.

px: CSS-пиксель

.card {  border: 1px solid #d0d5dd;}​

px — абсолютная CSS-единица, но она не обязана соответствовать одному физическому пикселю экрана. Она удобна для тонких рамок, теней и деталей, которые не должны зависеть от размера шрифта.

Не фиксируйте в пикселях всё подряд. Текст и компоненты должны выдерживать пользовательское масштабирование.

rem: размер корневого шрифта

1rem равен вычисленному font-size элемента <html>.

body {  font-size: 1rem;}​.article h2 {  margin-block-start: 3rem;  font-size: 2rem;}​

Если пользователь изменит базовый размер, значения в rem масштабируются согласованно. Не используйте приём html { font-size: 62.5%; }: он переопределяет пользовательскую базу и усложняет совместную работу.

em: размер текущего элемента

Для font-size единица em зависит от размера шрифта родителя, а в большинстве других свойств — от размера самого элемента.

.button {  padding: 0.65em 1em;  border-radius: 0.5em;}​.button--large {  font-size: 1.25rem;}​

Отступы и радиус большой кнопки увеличатся вместе с текстом. При глубокой вложенности размеры em могут неожиданно перемножаться:

.menu {  font-size: 1.1em;}​

Каждый вложенный .menu станет ещё крупнее. Для независимых размеров часто проще rem.

Проценты

Процент зависит от свойства и контекста. Ширина обычно вычисляется относительно содержащего блока:

.image {  max-inline-size: 100%;  block-size: auto;}​

Вертикальный padding в процентах тоже имеет особенности контекста. Не угадывайте — проверяйте определение конкретного свойства.

Процентная высота работает только при определённой высоте содержащего блока. Для секции с текстом чаще нужны содержимое, padding и min-block-size, а не height: 100%.

Viewport: vw, vh, dvh, svh, lvh

• 1vw — 1% ширины viewport;
• 1vh — 1% его высоты по традиционной модели;
• dvh — 1% динамической высоты с учётом изменения браузерных панелей;
• svh и lvh — малая и большая высота viewport.

Для полноэкранного мобильного блока часто уместнее:

.dialog {  min-block-size: 100dvh;}​

Добавьте fallback, если поддерживаете старые браузеры:

.dialog {  min-block-size: 100vh;  min-block-size: 100dvh;}​

Не задавайте основной текст как font-size: 3vw: на узком экране он станет слишком мелким, на широком — огромным. Ограничивайте диапазон.

ch и длина строки

.article {  max-inline-size: 70ch;}​

ch приблизительно равен ширине символа 0 текущего шрифта. Это удобный ориентир для текстовой колонки, но реальная ширина букв различается.

lh и rlh связаны с высотой строки текущего и корневого элемента:

.icon {  inline-size: 1lh;  block-size: 1lh;}​

Они полезны для привязки размеров к вертикальному ритму.

fr в CSS Grid

fr — доля свободного пространства в сетке, а не обычная единица длины:

.layout {  display: grid;  grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);  gap: 2rem;}​

minmax(0, 2fr) позволяет колонке с длинным содержимым реально сжиматься. Без нулевого минимума строка кода или длинный URL иногда раздвигает сетку.

clamp(), min() и max()

Эти функции комбинируют разные единицы:

.hero__title {  font-size: clamp(2rem, 1.2rem + 4vw, 5rem);}​.container {  inline-size: min(100% - 2rem, 75rem);  margin-inline: auto;}​

Заголовок плавно растёт между минимумом и максимумом. Контейнер занимает доступную ширину с полями, но не превышает 75rem.

Практическая шпаргалка

Что запомнить

Не заменяйте все px на rem механически. Сначала определите зависимость размера. Проверяйте интерфейс при ширине 320 px, масштабе 200%, увеличенном системном шрифте и с длинным содержимым — именно эти тесты показывают, удачно ли выбраны единицы.

report Сообщить об ошибке в статье