[Medium] CSS Units (Единицы измерения CSS)

1. В чём разница между px, em, rem, vw и vh?

Краткое сравнение

Единица	Тип	Относительно	Типичное использование
px	Абсолютная	CSS-пиксель	Рамки, тени, мелкие детали
em	Относительная	Размер шрифта элемента (или родителя для font-size)	Локальные отступы/масштабирование
rem	Относительная	Размер шрифта корневого элемента (html)	Глобальная типографика и отступы
vw	Относительная	1% ширины viewport	Плавная ширина/макет
vh	Относительная	1% высоты viewport	Секции на всю высоту

2. Поведение единиц с примерами

px

.card {
  border: 1px solid #d1d5db;
  border-radius: 8px;
}

Используйте для чётких визуальных деталей.

em

.button {
  font-size: 1rem;
  padding: 0.5em 1em;
}

Padding масштабируется в соответствии с размером шрифта этого элемента.

rem

html {
  font-size: 16px;
}

h1 {
  font-size: 2rem; /* 32px */
}

Отлично подходит для единообразного размера во всех компонентах.

vw и vh

.hero {
  min-height: 100vh;
  padding-inline: 5vw;
}

Используйте для макетов, зависящих от viewport.

3. Другие полезные единицы

%

Относительно размера родителя/контекста.

.container {
  width: 80%;
}

vmin и vmax

• 1vmin: 1% от меньшей стороны viewport
• 1vmax: 1% от большей стороны viewport

ch

Примерно ширина символа 0. Полезна для читаемой длины строк.

.prose {
  max-width: 65ch;
}

4. Практические правила

• Используйте rem для шрифтов и шкалы отступов
• Используйте px для рамок/тонких эффектов
• Используйте % для плавных контейнеров
• Используйте vw/vh для секций, зависящих от viewport
• Используйте em, когда нужно локальное масштабирование компонента

5. Особенности viewport на мобильных устройствах

В мобильных браузерах динамическая адресная строка может делать 100vh нестабильным.

Предпочтительно использовать более новые единицы, где поддерживается:

• dvh: динамическая высота viewport
• svh: малая высота viewport
• lvh: большая высота viewport

.full-screen {
  min-height: 100dvh;
}

6. Быстрые ответы для собеседования

Q1: Почему многие команды предпочитают rem вместо px для типографики?

Это централизует масштабирование от корневого font-size и повышает единообразие.

Q2: Почему вложенные em могут быть коварными?

Они накапливаются на основе локальных размеров шрифта, что может неожиданно нарастать.

Q3: Когда px всё же является правильным выбором?

Для точных визуальных деталей, таких как рамки, тени и корректировка выравнивания иконок.