Урок 37. Старый vs Новый: Адаптивная типографика и отступы

📁 Раздел: Адаптивная вёрстка ⏱️ Время изучения: ~70 мин 🎯 Сложность: Средняя
#clamp #min #line-height

⚡ Кратко

Раньше: лесенка из @media-запросов, размер «прыгает» ступеньками на каждом breakpoint. Теперь: один clamp() — размер растёт плавно и держится в границах. Меньше кода, нет скачков.

Размер шрифта: media-лесенка → clamp()

Старый подход — ступеньки на breakpoint

Фиксированный размер плюс несколько @media. Между breakpoint размер не меняется, на границе — резкий скачок. Кода много, промежуточные ширины выглядят «не на своём размере».

📄 lesson-37/old.css
h1 { font-size: 36px; }

@media (min-width: 768px) {
  h1 { font-size: 48px; }
}

@media (min-width: 1200px) {
  h1 { font-size: 72px; }
}
скачок на breakpoint:
36px ▍ резко → 48px ▍ резко → 72px

Современный подход — один clamp()

Браузеру даются min, vw-наклон и max — размер сам выбирает значение по реальной ширине. Те же три размера, но между ними плавный переход и втрое меньше кода.

📄 lesson-37/modern.css
h1 {
  font-size: clamp(2.25rem, 1.4rem + 4vw, 5rem);
  line-height: 1;
}

section {
  padding-block: clamp(3rem, 8vw, 7rem);
}
плавно от min к max:
min → vw → max
Когда media всё ещё нужны: для смены раскладки (одна колонка → три) media-запросы остаются. clamp() заменяет их только для плавно меняющихся величин — размеров и отступов.

Навигация