Справочник CSS

clamp(): адаптивный размер с границами

clamp(min, preferred, max) возвращает текучее значение, но не даёт ему выйти за заданные границы. Функция удобна для адаптивной типографики и отступов.

Рабочий пример

h1 {
  font-size: clamp(2rem, 5vw, 4.5rem);
}
.section {
  padding-block: clamp(40px, 8vw, 96px);
}

В середине обычно стоит значение с vw или вычисление calc. На узком экране действует минимум, в промежутке размер меняется плавно, на широком — останавливается на максимуме.

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

Подбирай границы по макету и проверяй промежуточные ширины. clamp дополняет медиазапросы, но не заменяет изменения структуры интерфейса.

Проверь пример самостоятельно: измени исходные данные, убери одну строку и сравни результат. Такой короткий эксперимент помогает увидеть роль каждого свойства или метода и не превращает обучение в механическое копирование.

Частые ошибки

• Менять размер слишком резко большим коэффициентом vw
• Ставить минимум больше максимума
• Не проверять масштабирование текста в браузере