Руководство по единицам измерения CSS: px, %, rem, em, vw, vh

1. Пиксели (`px`)

Что это: Абсолютная единица (1px = 1 пиксель на экране).
Особенности:

Фиксированный размер, не зависит от других элементов.
Не масштабируется при изменении пользователем размера шрифта в браузере.
Пример:

css

.element {
  width: 200px; /* Всегда 200 пикселей */
  font-size: 16px;
}

Когда использовать: Для мелких элементов (границы, иконки), где нужна точность.

2. Проценты (`%`)

Что это: Относительная единица, вычисляется как процент от родительского элемента.
Особенности:

Зависит от родителя (например, width: 50% — половина ширины родителя).
Для font-size процент берётся от размера шрифта родителя.
Пример:

css

.parent { width: 400px; }
.child { 
  width: 50%; /* = 200px */
  font-size: 80%; /* 80% от размера шрифта родителя */
}

Когда использовать: Для адаптивных сеток, резиновых изображений.

3. `em`

Что это: Относительная единица, зависит от размера шрифта текущего элемента (или родителя).
Особенности:

Для font-size: 1em = текущий размер шрифта родителя.
Для других свойств (width, margin): 1em = текущий font-size самого элемента.
Пример:

css

.parent { font-size: 20px; }
.child {
  font-size: 1.5em; /* = 30px (20px × 1.5) */
  padding: 2em; /* = 60px (30px × 2) */
}

Проблема: Наследование может вызывать каскадное увеличение размеров.
Когда использовать: Для локальных стилей внутри компонентов (кнопки, карточки).

4. `rem` (Root em)

Что это: Относительная единица, зависит от размера шрифта корневого элемента (<html>).
Особенности:

1rem = font-size элемента <html> (по умолчанию 16px в браузерах).
Не зависит от вложенности.
Пример:

css

html { font-size:clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.455), 18px); }
.element {
  font-size: 2rem; /* = 36px */
  margin: 1rem; /* = 18px */
}

Когда использовать: Основная единица для адаптивной типографики, отступов, размеров.

5. `vw` (Viewport Width)

Что это: 1% от ширины области просмотра (окна браузера).
Особенности:

100vw = вся ширина экрана.
Изменяется при изменении размера окна.
Пример:

css

.element {
  width: 50vw; /* 50% ширины окна */
  font-size: 4vw; /* Размер шрифта зависит от ширины окна */
}

Осторожно: Для текста используйте calc() с rem, чтобы избежать слишком мелкого текста на мобильных.

6. `vh` (Viewport Height)

Что это: 1% от высоты области просмотра.
Особенности:

100vh = вся высота экрана.
Игнорирует скролл-бар.
Пример:

css

.header {
  height: 10vh; /* 10% высоты окна */
}
.full-screen {
  height: 100vh; /* Вся высота окна */
}

Когда использовать: Для полноэкранных секций, модальных окон.

Сводная таблица

Единица	Зависит от	Использование
`px`	Фиксированный размер	Границы, иконки
`%`	Размера родителя	Сетки, изображения
`em`	`font-size` родителя/элемента	Локальные компоненты
`rem`	`font-size` элемента `<html>`	Типографика, отступы, глобальные размеры
`vw`	Ширины окна браузера	Адаптивные баннеры
`vh`	Высоты окна браузера	Полноэкранные блоки

Советы по использованию

Базовая настройка:css

html { 
  font-size: 16px; /* 1rem = 16px */
}

Адаптивность с rem и vw:

css

/* Динамический размер шрифта */
html {
  font-size: calc(14px + 0.5vw); /* От 14px на мобильных до 18px на десктопах */
}

Комбинирование единиц:

css

.element { width: min(100%, 1200px); /* Не шире 1200px */ padding: 2rem clamp(1rem, 5vw, 3rem); /* Отзывчивый padding */ }
Избегайте:
- Использования vw для текста без min()/max().
- Каскадных em в сложных компонентах.

Примеры

Адаптивная типографика:

css

h1 {
  font-size: clamp(1.5rem, 5vw, 3rem); /* Минимум 1.5rem, максимум 3rem */
}

Полноэкранный блок:

css

.hero {
  height: 100vh;
  width: 100vw;
  padding: 5%;
}

Кнопка с отступами в em:

css

.button {
  font-size: 1rem;
  padding: 0.8em 1.5em; /* Отступы масштабируются с размером шрифта */
}

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

aRGB