ПаветтаКалькулятор CSS clamp()
clamp() задаёт значение, которое плавно растёт вместе с шириной экрана и упирается в границы: одно выражение заменяет три медиазапроса и переходы между ними становятся незаметными.
Две точки
Готовое выражение
Как растёт значение
Значение на разных экранах
| Ширина экрана | Значение | В rem | Что происходит |
|---|
Предпросмотр
Заголовок, который растёт вместе с экраном
Как устроено выражение
Калькулятор собирает выражение clamp() для плавного изменения размера между двумя точками ширины экрана. Задаются минимальный и максимальный размер и границы диапазона, а функция сама считает промежуточные значения.
Функция принимает три аргумента: нижнюю границу, предпочитаемое значение и верхнюю. Браузер берёт среднее и зажимает его между крайними, поэтому текст перестаёт расти на больших экранах и не проваливается на маленьких.
Среднее значение задаётся линейной формулой от ширины окна: сумма постоянной части в rem и переменной в vw. Калькулятор выводит коэффициенты из четырёх заданных чисел, решая систему из двух уравнений.
Отдельно инструмент показывает предпросмотр: как размер меняется при протаскивании ширины от мобильного экрана до широкого монитора. Так видно, где рост слишком резкий и границы стоит развести шире.
| Аргумент | Что задаёт |
|---|---|
| Первый | Минимум, ниже не опустится |
| Второй | Предпочитаемое значение с vw |
| Третий | Максимум, выше не поднимется |
От медиазапросов к функциям сравнения
Адаптивная вёрстка началась со статьи Итана Маркотта 2010 года, где он предложил связку из гибкой сетки, гибких изображений и медиазапросов. Размеры шрифта тогда переключались ступенями на заданных точках перелома.
Ступенчатый подход давал заметный скачок: при пересечении границы заголовок прыгал с 24 на 40 пикселей. Плавные формулы на единицах vw появились как ответ, но у них была своя беда — на очень широких и очень узких экранах размер уходил в крайности.
Функции сравнения min(), max() и clamp() вошли в спецификацию значений CSS и получили поддержку во всех основных браузерах к 2020 году. Они решили обе задачи разом: рост плавный, но ограниченный с двух сторон.
Отдельная тонкость — округление. Браузеры считают результат в дробных пикселях и округляют его при отрисовке по-разному, поэтому одна и та же формула на двух устройствах может дать размер, различающийся на пиксель. На тексте это незаметно, на выравнивании иконок — вполне.
Единица vw равна одному проценту ширины окна и появилась ещё в спецификации 2012 года. Её долго применяли с осторожностью из-за того, что размер, заданный только в vw, игнорирует пользовательскую настройку масштаба шрифта.
Как задать границы и проверить
Задайте размеры на узком и широком экране и границы диапазона — калькулятор соберёт готовое выражение. Типичные границы: от 320 до 1280 пикселей ширины.
Держите постоянную часть в rem. Выражение, состоящее из одних vw, ломает масштабирование шрифта в настройках браузера, а смешанная формула его сохраняет — это требование доступности.
Проверьте поведение при увеличении масштаба страницы. Пользователь с ослабленным зрением ставит масштаб 200 процентов, и формула должна продолжать увеличивать текст, вместо того чтобы упираться в потолок сразу.
Проверяйте крайние точки. Размер, красивый на середине диапазона, на 320 пикселях может оказаться нечитаемым, и предпросмотр показывает это до вёрстки.
Применяйте clamp не только к шрифту. Отступы, ширина колонки и высота блока с ним работают так же, и связанные величины лучше пересчитывать одной формулой.
Округляйте коэффициенты до разумной точности. Выражение с семью знаками после запятой читается тяжело и в отладке не помогает: разница между 2,3457vw и 2,35vw на любом экране меньше половины пикселя.
Собрать согласованный набор размеров поможет калькулятор модульной шкалы, а подобрать интервал — калькулятор межстрочного интервала.
| Аргументов | три |
| Типичный диапазон | 320–1280 px |
| Единица vw | 1 % ширины окна |
| Постоянная часть | в rem |
| Поддержка браузеров | с 2020 |
| vw в спецификации | с 2012 |
| Статья Маркотта | 2010 |
| Работает и с | отступами и шириной |
Что показывает расчёт
Clamp() задаёт значение, которое плавно растёт вместе с шириной экрана и упирается в границы: одно выражение заменяет три медиазапроса и переходы между ними становятся незаметными. Инструмент считает среднюю часть выражения по двум точкам — сколько должно быть на узком экране и сколько на широком — и рисует график, где видно, где начинается и где заканчивается рост. Отдельно проверяется требование доступности: если шрифт задан только в vw, он перестаёт слушаться настройки масштаба в браузере, и инструмент об этом предупреждает.
Как пользоваться
Инструмент считает среднюю часть выражения по двум точкам — сколько должно быть на узком экране и сколько на широком — и рисует график, где видно, где начинается и где заканчивается рост. Отдельно проверяется требование доступности: если шрифт задан только в vw, он перестаёт слушаться настройки масштаба в браузере, и инструмент об этом предупреждает.
- Размер на узком экране и на широком, плюс ширины самих экранов.
- Он показывает, где значение упирается в границы, а где растёт.
- Инструмент скажет, если выражение ломает пользовательский масштаб.
- Готовое clamp() под графиком, в rem — оно уважает настройки браузера.
Частые вопросы
Как устроено выражение clamp
Три аргумента: минимум, предпочитаемое значение и максимум. Браузер берёт среднее, но не даёт ему выйти за границы. Вся работа приходится на среднюю часть: она записывается как сумма постоянной части в rem и переменной в vw, и именно эта сумма даёт плавный рост.
Откуда берётся формула
Из уравнения прямой по двум точкам. Наклон равен разнице размеров, делённой на разницу ширин экрана; переменная часть — это наклон, умноженный на 100vw. Постоянная часть подбирается так, чтобы в первой точке сумма дала нужный размер. Инструмент делает этот расчёт и переводит результат в rem.
Почему выражение записано в rem
Из-за доступности. Значение в rem зависит от базового размера шрифта, который человек может увеличить в настройках браузера. Если записать всё в пикселях, увеличение перестанет работать: для людей со слабым зрением сайт останется мелким.
Что за предупреждение про масштабирование
Есть требование доступности WCAG: текст должен увеличиваться минимум вдвое. Если размер шрифта задан только через vw, при увеличении масштаба он не растёт — окно-то не изменилось. Поэтому в средней части clamp обязана быть постоянная часть в rem: тогда масштаб работает, а рост от ширины остаётся.
Можно ли применять clamp не к шрифту
Да, к любому размеру: отступы секций, ширина контейнера, скругление, высота обложки. Особенно полезно для вертикальных отступов: на телефоне 40 пикселей достаточно, на широком экране нужно 96, и clamp закрывает это одной строкой без медиазапросов.
Что если минимум окажется больше максимума
По спецификации выигрывает минимум: браузер сначала применяет верхнюю границу, потом нижнюю, и нижняя оказывается сильнее. Результат будет постоянным и равным минимуму — обычно это ошибка, поэтому инструмент такую пару подсвечивает.
Спросите нейросети об инструменте
Больше возможностей: Нейросеть для кода, написать, найти ошибку, объяснить.
Похожие инструменты
Размеры шрифта по одной пропорции: от малой терции до золотого сечения. Готовые переменные CSS и адаптивная шкала через clamp.
ОткрытьКалькулятор межстрочного интервалаПеревод line-height между множителем, px, em, % и пунктами. Рекомендация по длине строки, живой абзац и расчёт строк на А4.
ОткрытьГенератор CSS transformСдвиг, поворот, масштаб и наклон, включая трёхмерные повороты с перспективой. С точкой отсчёта и разбором чужого значения.
ОткрытьГенератор CSS GridКолонки и строки в fr, px и auto, объединение ячеек мышью и именованные области. Выдаёт готовый grid-template с областями.
ОткрытьГенератор CSS-градиентовЛинейный, радиальный и конический градиент с живым предпросмотром. Любое число цветовых точек, угол и позиции, разбор чужого кода обратно в точки.
ОткрытьГенератор FlexboxВизуальный конструктор flex-раскладки: направление, перенос, выравнивание по обеим осям. Отдельно настраиваются grow, shrink, basis и order каждого элемента.
ОткрытьЕщё генераторы
Пароли и тестовые данные, CSS-градиенты, тени и скругления, clip-path и фильтры, анимации, Flexbox и Grid — в разделе 39 генераторов.