Урок 39. Теория: clamp(), min(), max(), calc()

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

⚡ Кратко

Четыре функции считают размеры прямо в CSS — без JavaScript и часто без media queries:

  • calc() — калькулятор: смешивает единицы, например calc(100% - 2rem).
  • min(a, b) — берёт меньшее из значений (потолок ширины).
  • max(a, b) — берёт большее (минимальный безопасный отступ).
  • clamp(min, гибкое, max) — держит гибкое значение в коридоре между min и max.

Главное правило calc(): вокруг + и - обязательны пробелы.

Главная идея

Раньше любой «гибкий» размер требовал лесенки из @media: для каждой ширины экрана — своё значение. CSS-функции вычислений убирают эту лесенку. Браузер сам считает размер в момент отрисовки и пересчитывает его при изменении ширины окна, масштаба или шрифта.

calc() считает арифметику прямо в свойстве: можно вычесть отступы из 100%, смешать rem и vw, задать высоту относительно высоты экрана.

min() возвращает меньшее из аргументов, max() — большее. Звучит наоборот, но это логично: min(90%, 600px) даёт «не больше 600px» (потолок), а max(1rem, 3vw) — «не меньше 1rem» (пол).

clamp(min, preferred, max) объединяет всё: пол, гибкое значение и потолок. Это основа fluid typography и fluid spacing — текст и отступы плавно растут вместе с экраном, но не выходят за безопасные границы. Фактически clamp(a, b, c) — это короткая запись max(a, min(b, c)).

calc() — это калькулятор, встроенный прямо в CSS: пишешь выражение со смешанными единицами, а браузер считает результат. min() — как выбор коробки на полке: «возьми ту, что меньше — чтобы точно влезла» (не вылезти за контейнер). max() — наоборот: «возьми не меньше этой, иначе будет неудобно» (минимальный отступ для пальца). А clamp() — это термостат: задаёшь нижнюю и верхнюю границу, и значение свободно «гуляет» внутри, но никогда не выходит за коридор.

Как clamp() выбирает значение

Внутри коридора clamp() следует за гибким (preferred) значением — обычно с участием vw. Как только гибкое значение упирается в одну из границ, оно «прилипает» к ней:

ширина экрана → размер → min (пол) preferred (vw) max (потолок)
clamp(min, preferred, max): пока экран узкий — держится за min; растёт по preferred; упёршись в max — останавливается.

Правила

  • Всегда задавайте реальные границы: гибкое значение без min/max может стать слишком крупным или нечитаемо мелким.
  • В calc() ставьте пробелы вокруг + и -: calc(100%-2rem) не распарсится, нужно calc(100% - 2rem). Вокруг * и / пробелы не обязательны.
  • Сначала проверьте, не решается ли задача одной функцией вместо нового media query.
  • clamp(), min() и max() принимают любое число аргументов через запятую и могут содержать calc()-арифметику внутри.

Когда применять

min() — для «резинового» контейнера с потолком: width: min(90%, 600px). max() — для гарантированного минимума: отступ, который не схлопнется на мобильном. clamp() — для fluid-шрифтов и адаптивных отступов одной строкой. calc() — везде, где нужно смешать единицы или вычесть фиксированную величину из процентов.

Базовый CSS

📄 lesson-39/styles.css
.hero {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
  min-height: calc(100svh - 4rem);
  padding-block: clamp(3rem, 8vw, 7rem);
}

.hero h1 {
  max-width: 12ch;
  font-size: clamp(2.25rem, 1.2rem + 5vw, 5rem);
  line-height: 1;
}

.hero p {
  max-width: max(42ch, 50%);
}
Подсказка: чтобы прочувствовать функции, откройте пример в DevTools и медленно меняйте ширину окна — увидите, как значения «прилипают» к границам.

Навигация