Функция clamp() в CSS задаёт значение, которое плавно меняется, но всегда остаётся в заданных минимальном и максимальном пределах. Чаще всего её используют для адаптивных размеров (например, шрифтов, блоков, отступов), чтобы обойтись без множества медиазапросов. По сути, вы в одной записи описываете схему «минимум — желаемое значение — максимум».
clamp() — это CSS-функция, принимающая три аргумента: clamp(min, preferred, max). Браузер сначала вычисляет «предпочтительное» значение (часто зависящее от ширины вьюпорта, например через единицы vw), а затем ограничивает результат так, чтобы он всегда был не меньше min и не больше max. Это позволяет писать один выразительный базовый стиль вместо нескольких @media с разными значениями.
Аргументы функции:
min — минимально допустимое значение (например, 1rem), ниже которого свойство не опустится даже на маленьких экранах.preferred — желательное значение, часто выражение с относительными единицами (vw, vh, %), задающее, как именно значение должно плавно меняться.max — максимальное значение (например, 3rem), выше которого свойство не вырастет даже на очень широких экранах.Ниже пример с адаптивным размером шрифта заголовка: значение растёт вместе с шириной окна, но всегда остаётся в разумных пределах.
Без clamp() похожий эффект пришлось бы настраивать через несколько медиазапросов с разными font-size, усложняя код и его поддержку. clamp() позволяет собрать эту логику в одну декларацию и сделать поведение шрифта более предсказуемым и наглядным.
Аналогично можно задавать гибкую ширину контейнера: он будет тянуться вместе с экраном, но никогда не станет слишком узким или слишком широким.
Функцию clamp() можно использовать в любых свойствах, где допустимы длины, размеры или числа: font-size, width, height, margin, padding, line-height, border-radius и других. Это удобный инструмент для построения адаптивных интерфейсов с плавным поведением без избыточного количества медиазапросов.
Отметьте свой прогресс