Урок 13. Теория: Единицы измерения в CSS

📁 Раздел: Основы CSS ⏱️ Время изучения: ~40 мин 🎯 Сложность: Начальная
#min #max #clamp

⚡ Кратко

Единица измерения отвечает на вопрос «сколько именно». Бывают абсолютные (px — фиксированный размер) и относительные (%, em, rem, vw, vh, ch — зависят от чего-то ещё).

  • px — «жёсткая линейка»: 16px всегда 16px. Хорош для рамок и тонких деталей.
  • rem — «в N раз от шрифта страницы» (корня). Лучший выбор для отступов и типографики.
  • em — «в N раз от шрифта текущего элемента». Удобен внутри компонента, но во вложенности накапливается.
  • % — «доля от родителя»: width: 50% — половина ширины контейнера.
  • vw/vh — «доля от окна»: 100vw — вся ширина экрана.
  • ch — «ширина символа», удобна для ограничения длины строки текста.

Главная идея

Любой размер в CSS — это число + единица измерения: 16px, 2rem, 50%. Единица говорит браузеру, относительно чего считать. Все единицы делятся на две группы. Абсолютные (главная — px) не зависят ни от чего: 16px всегда 16px. Относительные (%, em, rem, vw, vh, ch) пересчитываются от чего-то ещё — от шрифта, родителя или окна. Именно относительные единицы делают вёрстку адаптивной.

px — фиксированная линейка. Отмеряешь 16 миллиметров — и они всегда 16, на любом столе. em и rem — это «в N раз от шрифта», как рецепт «в 2 раза больше базовой порции»: если базовая порция вырастет, вырастет и блюдо. % — «доля от родителя», как «полстакана» — половина зависит от того, насколько велик сам стакан. Меняешь линейку (px) — ничего вокруг не подстраивается; меняешь рецепт (rem/em/%) — всё пересчитывается само.

Как это работает: одна и та же ширина в разных единицах

Возьмём контейнер шириной 320px и положим внутрь полоски. Видно, как одно и то же число даёт разную ширину в зависимости от единицы (родитель = 320px, базовый шрифт = 16px):

width: 200px → 200px
width: 50% → половина родителя (160px)
width: 10rem → 10×16 = 160px
width: 75% → 240px
Внутри контейнера 320px: px даёт точное число, % — долю родителя, rem — кратное базовому шрифту.

Относительные единицы по очереди

  • px (абсолютная) — точное значение в пикселях. Идеален для рамок (1px), теней и мелких деталей, которые не должны «плыть».
  • rem — кратно размеру шрифта корня (<html>, по умолчанию 16px). 1rem = 16px, 1.5rem = 24px. Не зависит от вложенности — поэтому это главный выбор для отступов, размеров шрифта и сеток.
  • em — кратно шрифту текущего элемента. Удобен внутри кнопки или бейджа: padding в em масштабируется вместе с её текстом. Но во вложенных элементах em умножается на em и может «убегать».
  • % — доля от родителя. Для ширины — от ширины родителя, для шрифта — от шрифта родителя. Основа «резиновых» колонок.
  • vw / vh — 1% ширины/высоты окна. 100vh — на всю высоту экрана. Хороши для крупных hero-секций, но для текста опасны: на широком мониторе буквы станут огромными.
  • ch — ширина символа «0» текущего шрифта. max-width: 70ch — классический приём для комфортной длины строки (≈70 символов).

Зачем это нужно: адаптивность и доступность

Относительные единицы дают два больших плюса. Первый — адаптивность: одна и та же вёрстка выглядит соразмерно и на телефоне, и на большом мониторе, потому что размеры пересчитываются от контекста. Второй — доступность: если пользователь увеличит шрифт в настройках браузера (важно для людей со слабым зрением), всё, что задано в rem/em, увеличится вместе с ним. Размеры, прибитые в px, при таком зуме не отреагируют — текст останется мелким, а макет может поехать.

Современная связка — функция clamp(min, идеал, max): задаёт значение, которое плавно тянется вместе с экраном, но не выходит за нижнюю и верхнюю границы. Например, font-size: clamp(2rem, 5vw, 4rem) — заголовок не станет ни слишком мелким, ни гигантским.

Правило выбора: шрифт и отступы — rem; внутренние размеры компонента — em; «резиновые» ширины — %; рамки и мелочь — px; крупные секции — vw/vh с осторожностью.
⚠️ Проверить по документации (MDN: CSS values and units): точное поведение em для свойства font-size (считается от шрифта родителя) и единиц vw/vh при наличии полос прокрутки.