Урок 39. Старый vs Новый: clamp(), min(), max(), calc()

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

⚡ Кратко

Раньше адаптивность = лесенка @media с фиксированными числами на каждый брейкпоинт. Теперь одна строка clamp()/min() делает то же самое — плавно и без скачков.

Старый подход: лесенка media queries

Жёсткие значения и дубли правил на каждый размер экрана. Между брейкпоинтами размер «прыгает».

📄 lesson-39/old.css
.hero { width: 1200px; padding: 96px 0; }
h1 { font-size: 72px; }

@media (max-width: 768px) {
  .hero { width: 100%; padding: 48px 16px; }
  h1 { font-size: 36px; }
}

Скачок: 36px → 72px на брейкпоинте

между 768px и десктопом размер меняется резко

Современный подход: CSS-функции

Те же границы, но без отдельных media queries. Размер плавно растёт внутри коридора.

📄 lesson-39/modern.css
.hero {
  width: min(100% - 2rem, 72rem);
  padding-block: clamp(3rem, 8vw, 7rem);
}

h1 {
  font-size: clamp(2.25rem, 1.2rem + 5vw, 5rem);
}

Плавно от 2.25rem до 5rem

меняйте ширину окна — размер ползёт без скачков
Итог: media queries не исчезают совсем, но для размеров и отступов их теперь чаще заменяют clamp(), min() и max() — меньше кода, плавнее результат.

Навигация