Единицы измерения

CSS единицы делятся на абсолютные (px, pt) и относительные (em, rem, %, vw, vh, fr). Абсолютные — фиксированные размеры. Относительные — зависят от контекста. Выбор единицы зависит от задачи: rem — для типографики, vw — для ширины, fr — для grid, % — для ширины контейнера.

Абсолютные единицы:

• px — пиксели. 1px = 1/96 дюйма. Наиболее предсказуемые.
• pt — пункты. 1pt = 1/72 дюйма. Для печати.

Относительные единицы:

• em — от размера шрифта РОДИТЕЛЬСКОГО элемента.

1.5em = 150% от размера родителя. Проблема: вложенные em растут экспоненциально!

• rem — от размера шрифта КОРНЕВОГО элемента (html).

1rem = 16px (по умолчанию). Предсказуемые.

• % — от ширины РОДИТЕЛЬСКОГО элемента.

width: 50% = половина ширины родителя.

• vw — 1% ширины окна (viewport width).

width: 100vw = ширина окна браузера.

• vh — 1% высоты окна (viewport height).

height: 100vh = высота окна браузера.

• fr — доля свободного места в CSS Grid.

grid-template-columns: 1fr 2fr = 1/3 и 2/3.

• ch — ширина символа «0». Для ограничения длины строк.

Рекомендации:

• font-size: rem (масштабируемость)
• width: % или fr (адаптивность)
• padding/margin: rem (предсказуемость)
• media queries: em (а не px!)
• max-width контейнера: ch (читаемость)

Единицы — как линейки разных размеров. px — жёсткая линейка (всегда 16 пикселей). rem — линейка, привязанная к корню (масштабируется). % — линейка, привязанная к контейнеру. vw — линейка, привязанная к экрану.

**Самый простой:**

body {
  font-size: 16px;      /* Абсолютный */
  margin: 0;
}

h1 {
  font-size: 2rem;       /* 32px от корня */
  margin-bottom: 1rem;   /* 16px от корня */
}

.container {
  width: 80%;            /* 80% от родителя */
  max-width: 1200px;     /* Максимум 1200px */
}

Базовые единицы: px, rem и % для ширины.

**Простой:**

/* Адаптивный заголовок */
h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
}

/* Полноэкранный блок */
.hero {
  height: 100vh;
  display: grid;
  place-items: center;
}

/* Grid с fr */
.layout {
  display: grid;
  grid-template-columns: 250px 1fr 300px;
  gap: 1rem;
}

/* Текст с ограничением длины */
.article-text {
  max-width: 65ch; /* ~65 символов на строку */
}

clamp(), vw, vh, fr и ch для разных задач.

**Реальный пример:**

/* Масштабируемая типографика */
html {
  font-size: 100%; /* 16px — базовый размер */
}

:root {
  --step-0: clamp(1rem, 0.93rem + 0.33vw, 1.13rem);
  --step-1: clamp(1.2rem, 1.07rem + 0.65vw, 1.5rem);
  --step-2: clamp(1.44rem, 1.23rem + 1.07vw, 2rem);
}

body { font-size: var(--step-0); }
h1   { font-size: var(--step-2); }

/* Адаптивная сетка */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--space, 1.5rem);
}

/* Full-bleed секция */
.full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

Современная типографика с clamp() и адаптивная сетка.

**Неправильно:** Считать em и rem одинаковыми

**Почему:** em — от родителя (вкладывается экспоненциально!). rem — от html (предсказуемо). Вложенные em могут стать огромными.

**Правильно:** Для font-size: rem (безопасно). Для padding/margin: em (нормально, не вкладывается экспоненциально).

**Неправильно:** Использовать px для медиа-запросов

**Почему:** Пользователи могут изменить базовый размер шрифта. Медиа-запросы в px не масштабируются.

**Правильно:** Media queries: @media (min-width: 768px) — px допустим, но em лучше для доступности.

**Неправильно:** Не использовать clamp()

**Почему:** clamp(min, preferred, max) — современная замена media queries для типографики.

**Правильно:** font-size: clamp(1rem, 2.5vw, 2rem) — плавное масштабирование без медиа-запросов.

• rem — безопасный выбор для font-size и spacing
• % — от родителя, vw/vh — от окна
• fr — доля в CSS Grid
• em и rem НЕ одинаковы (em от родителя!)
• clamp() — плавное масштабирование

Назад: Вы знаете текст и шрифты (C5) — единицы дают вам точный контроль над размерами.

Вперёд: В следующем уроке (C7) вы изучите блочную модель: content, padding, border, margin.