Какие знаешь CSS Units?

CSS Units (Единицы измерения в CSS)

Классификация CSS Unit

CSS поддерживает много различных единиц измерения для размеров, расстояний и других свойств. Они делятся на две основные категории: абсолютные и относительные.

Абсолютные единицы (Absolute Units)

Абсолютные единицы имеют фиксированный размер и не зависят от других параметров.

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

.box {
  width: 300px;
  height: 200px;
  font-size: 16px;
}

Самая популярная единица. 1px = 1/96 дюйма. Используется для точного контроля размеров.

2. Сантиметры (cm, mm, in, pt, pc)

.paper {
  width: 21cm;
  height: 29.7cm;
}

Редко используются в веб-разработке, в основном для печати.

Относительные единицы (Relative Units)

Относительные единицы зависят от других параметров.

1. em — относительно размера шрифта элемента

body {
  font-size: 16px;
}

.parent {
  font-size: 20px;
}

.child {
  font-size: 1.5em; /* 20px * 1.5 = 30px */
  margin: 0.5em;    /* 30px * 0.5 = 15px */
}

Проблема: вложенные em могут привести к непредсказуемым результатам.

2. rem — относительно размера шрифта корневого элемента

html {
  font-size: 16px;
}

.container {
  font-size: 2rem;  /* 16px * 2 = 32px */
  padding: 1rem;    /* 16px * 1 = 16px */
}

.small-text {
  font-size: 0.875rem; /* 16px * 0.875 = 14px */
}

Рекомендуется использовать rem вместо em для предсказуемости.

3. Viewport Units (vw, vh, vmin, vmax)

.fullscreen {
  width: 100vw;      /* 100% ширины viewport */
  height: 100vh;     /* 100% высоты viewport */
}

.hero {
  width: 80vw;       /* 80% ширины viewport */
  height: 50vh;      /* 50% высоты viewport */
}

.responsive-font {
  font-size: 5vmin;  /* 5% от меньшего из ширины/высоты */
}

.max-unit {
  font-size: 3vmax;  /* 3% от большего из ширины/высоты */
}

Полезны для полноэкранных элементов и адаптивного дизайна.

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

.container {
  width: 100%;       /* 100% ширины родителя */
  height: 100%;      /* 100% высоты родителя */
}

.half {
  width: 50%;
  padding: 5%;       /* 5% от ширины родителя */
}

Процент вычисляется относительно родительского элемента.

5. ch — ширина символа "0"

.input {
  width: 40ch;       /* 40 символов */
}

Полезно для контроля длины текста.

6. ex — высота символа "x"

.icon {
  width: 1ex;
  height: 1ex;
}

Редко используется, в основном для мелких типографических деталей.

Сравнение единиц

• px — абсолютные, всегда 300 пикселей
• em — относительно размера шрифта элемента
• rem — относительно размера шрифта root элемента
• vw/vh — относительно размера viewport
• % — относительно размера родителя

Рекомендации для использования

Используй rem для:

• Шрифтов
• Отступов (padding, margin)
• Расстояний между элементами
• Радиуса скругления

Используй px для:

• Border-ов
• Очень небольших отступов
• Когда требуется точность

Используй % для:

• Ширины и высоты
• Позиционирования

Используй vw/vh для:

• Полноэкранных секций
• Адаптивного масштабирования

Современный подход (CSS переменные)

:root {
  --spacing: 1rem;
  --font-size-base: 16px;
  --font-size-lg: 1.5rem;
}

body {
  font-size: var(--font-size-base);
}

.container {
  padding: var(--spacing);
  font-size: var(--font-size-lg);
}

Использование CSS переменных делает код более гибким и поддерживаемым.