Какие величины в CSS важны на практике и как их применять?

Величины CSS делят на абсолютные (px) и относительные (%, em, rem, vw, vh, fr, ch). Выбор зависит от того, к чему должен «привязываться» размер.

Что и когда

• `px` — рамки, тени, мелкие точные детали.
• `rem` — шрифты и основные отступы: масштабируются вместе с настройкой шрифта браузера.
• `em` — отступы внутри компонента, которые растут вместе с его шрифтом.
• `%` — доля от родителя: ширины колонок, позиционирование.
• `vw`/`vh`/`dvh` — привязка к окну: полноэкранные секции.
• `ch` — ширина текста: max-width: 65ch для удобного чтения.
• `fr` — доли свободного места в Grid.

.article {
  max-width: 65ch;
  padding: 1.5rem;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
}
.hero { min-height: 100dvh; }

Частые ошибки

• шрифты в px — не масштабируются при увеличении шрифта в браузере;
• 100vh на мобильных — панели браузера скрывают часть блока; лучше dvh.

Коротко для собеседования

rem — для шрифтов и отступов, em — внутри компонентов, % и fr — для раскладки, vw/vh/dvh — от окна, px — для мелких деталей; плавные размеры — через clamp().

Подробнее: MDN — Значения и единицы