Урок 13. Старый vs Новый: Единицы измерения в CSS

📁 Раздел: Основы CSS ⏱️ Время изучения: ~40 мин 🎯 Сложность: Начальная
#min #max #clamp

⚡ Кратко

Старый подход — «всё в px»: жёстко и не реагирует на зум. Современный — относительные единицы (rem/%) и clamp(): адаптивно и доступно.

Сравнение подходов

Заголовок: жёсткий px → адаптивный clamp()

❌ Было: всё в px

Заголовок 40px
.hero-title {
  font-size: 40px;       /* всегда 40px, не реагирует на зум */
  margin-bottom: 20px;
}

На узком экране 40px великоваты, при увеличении шрифта в браузере не вырастут — страдает доступность.

✅ Стало: относительные единицы + clamp()

Заголовок на clamp()
.hero-title {
  font-size: clamp(1.5rem, 5vw, 2.5rem); /* тянется с экраном */
  margin-bottom: 1.25rem;                /* rem → масштабируется */
}

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

Контейнер: фиксированная ширина → резиновая

❌ Было: width в px

width: 600px — на узком экране вылезет за край
.page { width: 600px; }   /* ломает мобильный экран */

✅ Стало: max-width + %

width: 100%; max-width: 600px — сжимается на узком экране
.page {
  width: 100%;          /* занимает доступную ширину */
  max-width: 600px;     /* но не больше 600px */
  margin: 0 auto;
}