Калькулятор CSS clamp()
clamp() задаёт значение, которое плавно растёт вместе с шириной экрана и упирается в границы: одно выражение заменяет три медиазапроса и переходы между ними становятся незаметными. Инструмент считает среднюю часть выражения по двум точкам — сколько должно быть на узком экране и сколько на широком — и рисует график, где видно, где начинается и где заканчивается рост. Отдельно проверяется требование доступности: если шрифт задан только в vw, он перестаёт слушаться настройки масштаба в браузере, и инструмент об этом предупреждает.
Две точки
Готовое выражение
Как растёт значение
Значение на разных экранах
| Ширина экрана | Значение | В rem | Что происходит |
|---|
Предпросмотр
Заголовок, который растёт вместе с экраном
Как пользоваться
- Размер на узком экране и на широком, плюс ширины самих экранов.
- Он показывает, где значение упирается в границы, а где растёт.
- Инструмент скажет, если выражение ломает пользовательский масштаб.
- Готовое clamp() под графиком, в rem — оно уважает настройки браузера.
Частые вопросы
Как устроено выражение clamp
Три аргумента: минимум, предпочитаемое значение и максимум. Браузер берёт среднее, но не даёт ему выйти за границы. Вся работа приходится на среднюю часть: она записывается как сумма постоянной части в rem и переменной в vw, и именно эта сумма даёт плавный рост.
Откуда берётся формула
Из уравнения прямой по двум точкам. Наклон равен разнице размеров, делённой на разницу ширин экрана; переменная часть — это наклон, умноженный на 100vw. Постоянная часть подбирается так, чтобы в первой точке сумма дала нужный размер. Инструмент делает этот расчёт и переводит результат в rem.
Почему выражение записано в rem, а не в px
Из-за доступности. Значение в rem зависит от базового размера шрифта, который человек может увеличить в настройках браузера. Если записать всё в пикселях, увеличение перестанет работать: для людей со слабым зрением сайт останется мелким.
Что за предупреждение про масштабирование
Есть требование доступности WCAG: текст должен увеличиваться минимум вдвое. Если размер шрифта задан только через vw, при увеличении масштаба он не растёт — окно-то не изменилось. Поэтому в средней части clamp обязана быть постоянная часть в rem: тогда масштаб работает, а рост от ширины остаётся.
Можно ли применять clamp не к шрифту
Да, к любому размеру: отступы секций, ширина контейнера, скругление, высота обложки. Особенно полезно для вертикальных отступов: на телефоне 40 пикселей достаточно, на широком экране нужно 96, и clamp закрывает это одной строкой без медиазапросов.
Что если минимум окажется больше максимума
По спецификации выигрывает минимум: браузер сначала применяет верхнюю границу, потом нижнюю, и нижняя оказывается сильнее. Результат будет постоянным и равным минимуму — обычно это ошибка, поэтому инструмент такую пару подсвечивает.
Данные куда-то отправляются
Нет, всё считается в браузере.
Похожие инструменты
Список в строку с разделителем и обратно. Переносы ↔ запятые/пробелы.
ОткрытьРазбить текст на частиДелит длинный текст на куски нужной длины: Telegram 4096, подпись 1024, ВК 4000, description 160, SMS 70. Не рвёт слова и предложения.
ОткрытьИзменить размер фотоПиксели вручную или готовый пресет: обложка ВК, превью YouTube, аватар, фото 3×4, печать 10×15. Пакетно, с обрезкой или полями.
ОткрытьТипографорКавычки-ёлочки «», дефис → тире, неразрывные пробелы после предлогов, чистка двойных пробелов. Аккуратная типографика для сайта.
ОткрытьГенератор sitemap.xmlСоберёт ссылки прямо с вашего сайта по адресу или сделает карту из готового списка URL. lastmod, changefreq, priority.
ОткрытьОбрезать строкиУдалить N символов с краёв, текст до/после символа, убрать приставку или окончание.
ОткрытьЕщё инструменты для SEO и маркетинга
Кластеризатор запросов, генераторы sitemap и robots.txt, минус-слова, разметка Schema.org и калькуляторы — в разделе инструментов.