Калькулятор CSS clamp()

clamp() — это современная CSS-функция, которая позволяет задавать адаптивные значения для любых свойств: шрифтов, отступов, размеров элементов. Синтаксис: clamp(MIN, PREFERRED, MAX), где MIN — минимальное значение, PREFERRED — предпочтительное (обычно в vw или %), MAX — максимальное. Например, font-size: clamp(16px, 2vw, 24px) означает, что шрифт будет минимум 16px, максимум 24px, а между ними будет масштабироваться пропорционально ширине экрана. Это золотая пуля адаптивного дизайна — один clamp() заменяет десятки медиа-запросов и делает интерфейс плавно масштабируемым.

Вы указываете минимальное и максимальное значение (например, 16 и 24 пикселя для шрифта) и диапазон ширины экрана, на котором будет происходить плавное изменение (например, от 320 до 1280 пикселей). Калькулятор автоматически рассчитывает оптимальные параметры clamp() и генерирует готовую строку CSS, которую можно скопировать в свой проект. Дополнительно показывается, как значение будет меняться при разных ширинах экрана, с наглядным предпросмотром. Это избавляет разработчика от ручных расчётов и вычислений формул, которые часто дают некорректные результаты.

В адаптивной типографике — адаптивные размеры шрифтов, которые красиво смотрятся на мобильных и десктопах. В отступах — margin и padding, плавно меняющиеся с шириной экрана. В размерах элементов — ширина и высота кнопок, карточек, контейнеров. В адаптивных сетках — плавное изменение колонок. В современном веб-дизайне, где важна отзывчивость интерфейса. clamp() поддерживается всеми современными браузерами (с 2020 года) и стал стандартным инструментом фронтенд-разработчиков. Он значительно упрощает код и делает его более поддерживаемым.

Сгенерированная строка состоит из трёх частей: clamp(МИНИМУМ, ПРЕДПОЧТИТЕЛЬНОЕ, МАКСИМУМ). Минимум — нижняя граница: значение не станет меньше, как бы ни сужался экран. Максимум — верхняя граница: значение не превысит его на широких мониторах. Предпочтительное — это формула вида «0.64rem + 1.82vw»: фиксированная часть в rem задаёт базу, а часть в vw (1vw = 1% ширины окна) добавляет плавный прирост по мере роста экрана. Браузер берёт предпочтительное значение, но никогда не выпускает его за пределы минимума и максимума.

Например, clamp(1rem, 0.64rem + 1.82vw, 2rem): на экране 320px шрифт равен 16px (минимум), на 1200px — 32px (максимум), а между ними растёт плавно, без единого медиа-запроса. Фиксированная rem-часть важна для доступности: при увеличении масштаба страницы пользователем rem тоже масштабируется, а чистый vw — нет.

Главная ошибка — задавать предпочтительное значение только в vw, без слагаемого в rem (например, clamp(1rem, 5vw, 2rem)). Такой текст не реагирует на изменение масштаба страницы в браузере, и людям со слабым зрением читать сложнее. Поэтому калькулятор по умолчанию выводит rem и добавляет фиксированную rem-часть.

Вторая ошибка — слишком большой перепад размеров на узком диапазоне ширин: значение «прыгает» при малейшем изменении окна. Берите реалистичные точки: 320–1280px или 360–1440px. Третья — перепутать минимум с максимумом: если минимальный размер больше максимального, значение масштабируется наоборот. Калькулятор предупреждает об этом и автоматически меняет границы местами. И помните: clamp() решает только числовые свойства — для перестроения макета (смена числа колонок, скрытие блоков) по-прежнему нужны медиа-запросы.