CSS единицы измерения: px, em, rem, vw, vh — практическое руководство для начинающих

Поисковый запрос, под который оптимизирована статья: «CSS единицы измерения: px, em, rem, vw, vh»

Зачем понимать CSS‑единицы

Единицы измерения в CSS напрямую влияют на адаптивность и масштабируемость интерфейса. Неправильный выбор приводит к «расползанию» верстки при зуме, неожиданным отступам и сломанной типографике. Ниже — практическое руководство с примерами и советами, которое поможет уверенно выбирать нужную единицу под задачу.

Абсолютные единицы: px и компания

px — де-факто стандарт для точечных деталей (границы, тонкие линии, пиксель‑перфект элементы). Остальные абсолютные (pt, cm, mm, in) используются редко и в вебе почти не нужны.

Относительные единицы: em и rem

rem считается от корневого шрифта (элемент html), а em — от текущего элемента (или ближайшего предка, где задан font-size).

/* Базовый размер шрифта (обычно 16px по умолчанию браузера) */
html { font-size: 100%; } /* 1rem = 16px, рекомендуется не занижать */

/***** Типографика и отступы на rem *****/
h1 { font-size: 2rem; margin-bottom: 1rem; }
p  { font-size: 1rem; line-height: 1.5; }

/***** Внутренняя масштабируемость компонента на em *****/
.button {
  font-size: 1rem;           /* базовый кегль */
  padding: 0.75em 1.25em;    /* подстраивается под font-size кнопки */
  border-radius: 0.5em;
}
.button--lg { font-size: 1.125rem; } /* всё «нарастет» пропорционально */

Типичная ошибка — вкладывать элементы с em и менять font-size на предках: величины начинают «умножаться». Если не нужна вложенная масштабируемость — используйте rem.

Единицы окна: vw, vh, vmin, vmax и новые dvh/svh/lvh

vw — 1% ширины окна, vh — 1% высоты окна. vmin и vmax — минимум/максимум из vw и vh. На мобильных у vh есть подвох: адресная строка меняет высоту видимой области, поэтому появились новые единицы:

/* Полноэкранный блок с адекватной высотой на мобильных */
.hero {
  min-height: 100vh;   /* базовый фолбек */
  min-height: 100dvh;  /* современные браузеры возьмут это */
  display: grid;
  place-items: center;
}

Совет: не злоупотребляйте vh для вертикальных отступов — лучше rem. vw отлично подходит для фоновых изображений на всю ширину и аккуратной fluid‑типографики вместе с clamp().

Проценты (%)

Проценты зависят от размера родителя. Важный нюанс: padding в процентах считается от ширины контейнера, даже по вертикали. Это использовали для соотношений сторон, но сегодня проще так:

/* Современный способ задать соотношение сторон */
.card {
  aspect-ratio: 16 / 9; /* вместо padding-top: 56.25% */
}

calc(), min(), max(), clamp(): гибкость без JS

Эти функции позволяют выражать зависимости между единицами. Самое полезное — clamp() для «жидкой» типографики: размер растет между минимальным и максимальным значениями в зависимости от ширины окна.

/* Fluid‑типографика заголовка: от 24px до 40px */
:root { --step: 1rem; } /* 1rem = 16px */
h1 {
  font-size: clamp(1.5rem, 1rem + 3vw, 2.5rem);
  margin-bottom: var(--step);
}

/* Гибкие отступы: растут чуть-чуть вместе с вьюпортом */
.section {
  padding: clamp(1rem, 0.75rem + 1vw, 2rem);
}

/* Комбинация rem и px для тонкой настройки */
.box {
  width: calc(100% - 2rem);
  border: 1px solid #ddd; /* точность в px для границ */
}

Брейкпоинты в em: почему так лучше

Медиа‑запросы на em учитывают пользовательский зум и предпочтения шрифта: макет «ломается» в более предсказуемых местах на разных DPI и масштабах.

/* 1em в media завязан на размер шрифта браузера (обычно 16px) */
@media (min-width: 48em) { /* ~768px */
  .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64em) { /* ~1024px */
  .grid { grid-template-columns: repeat(3, 1fr); }
}

Мини‑проект: карточка с продуманными единицами

/* Базовые токены */
:root {
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: clamp(1rem, 0.75rem + 1vw, 2rem);
  --radius: 0.75rem;
}

.card {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid #e6e6e6;         /* точность в px */
  border-radius: var(--radius);      /* масштабируемый радиус */
  background: #fff;
  max-width: 42rem;                  /* предсказуемая ширина */
}

.card__title {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  line-height: 1.2; /* без единиц для стабильности */
  margin: 0;
}

.card__text { font-size: 1rem; line-height: 1.6; }

.card__actions { display: flex; gap: var(--space-1); }

.button {
  font-size: 1rem;
  padding: 0.75em 1.25em;  /* эм — под размер текста в кнопке */
  border: 1px solid #222;
  background: #222; color: #fff;
  border-radius: 0.5em;
}
.button--ghost { background: transparent; color: #222; }

Частые ошибки и как их избежать

Рекомендуемые практики (шпаргалка)

Где потренироваться на практике

Если хотите быстро закрепить работу с единицами, отступами и адаптивом на реальном проекте, посмотрите курс «Вёрстка сайта с нуля 2.0». Это пошаговая практика с разбором тонкостей CSS: Прокачать верстку на реальном проекте за 30 дней →

Итог

Выбор единиц — фундамент качественной вёрстки. Комбинируйте rem для базы, em для локальной масштабируемости, px для точных деталей, а dvh/vw — для эффектных адаптивных секций. Добавьте calc() и clamp() — и получите гибкий, предсказуемый интерфейс без лишнего JavaScript.

Источник