Калькулятор CSS clamp() для адаптивной типографики и отступов

Что такое CSS clamp()?

clamp(MIN, PREFERRED, MAX) возвращает предпочтительное значение, но не меньше MIN и не больше MAX. Если предпочтительное значение растёт вместе с шириной экрана, например 0.8239rem + 0.7512vw, вы получаете плавно меняющиеся размеры шрифтов и отступов между мобильным и десктопным размером без набора медиазапросов. Это работает во всех современных браузерах.

Формула по шагам

Адаптивный размер — это прямая между двумя точками: (минимальная ширина, минимальный размер) и (максимальная ширина, максимальный размер). Для 16px при 375px и 24px при 1440px:

1. Наклон = (24 − 16) ÷ (1440 − 375) = 0.007512 — размер растёт на 0.0075px на каждый пиксель ширины экрана.
2. Часть в vw = наклон × 100 = 0.7512vw, потому что 1vw — это 1% ширины области просмотра.
3. Свободный член = 16 − 0.007512 × 375 = 13.183px = 0.8239rem при корневом размере 16px.
4. Результат: clamp(1rem, 0.8239rem + 0.7512vw, 1.5rem). При ширине 768px это 13.183 + 0.007512 × 768 ≈ 18.95px.

Зачем сочетать rem и vw?

Размер, заданный только через vw, не учитывает масштаб браузера и размер шрифта по умолчанию, заданный пользователем. Это может нарушать критерий WCAG 1.4.4 (Изменение размера текста). Если оставить в формуле свободный член в rem, значение продолжит реагировать на zoom и на увеличенный шрифт по умолчанию. Как правило, если максимум не больше чем в 2.5 раза превышает минимум, текст сможет увеличиться до 200%. Калькулятор предупреждает о диапазонах, которые выходят за это ограничение.

Адаптивные шкалы шрифтов и отступов

Вместо того чтобы считать каждый заголовок отдельно, задайте модульную шкалу: каждый шаг умножает базовый размер на коэффициент. Меньший коэффициент на мобильных (например, 1.2, малая терция) и больший на десктопе (например, 1.25, большая терция) сохраняют выразительность заголовков на больших экранах и не перегружают телефоны. Такой подход популяризировала Utopia. Шкала отступов умножает ту же базу (0.25×, 0.5×, 1×, 1.5×, 2×…), поэтому поля и зазоры растут вместе с текстом.

Как использовать clamp() в Webflow

• Прямо на панели стилей: Webflow принимает CSS-функции в полях размеров. Щёлкните в поле Font size, Padding или Gap, вставьте значение clamp(…) и нажмите Enter.
• Через переменные: создайте переменную типа Size для каждого шага (например, «Step 0», «Space M») на панели Variables, вставьте значение clamp() и примените переменную к шрифтам и зазорам в разных классах. Изменили один раз, обновилось везде.
• Через пользовательский код: вставьте сгенерированный блок :root { … } внутрь тега <style> в Настройки сайта → Пользовательский код → Код в head, затем введите var(--step-0) в любое поле размера.
• Адаптивные зазоры вида clamp(2rem, …, 4rem) не дают секциям выглядеть слишком крупными на планшетах. Используйте быстрый шаблон Gap.

Сначала переводите макет из пикселей? Конвертер PX в REM переведёт пиксели в rem.

Также ищут как: калькулятор clamp css, адаптивный шрифт калькулятор, css clamp, fluid typography, плавная типографика, адаптивный размер шрифта, vw rem калькулятор, fluid spacing.

Инструменты, которые хорошо сочетаются с Калькулятор clamp()

• Генератор типографической шкалы — Выберите базовый размер шрифта и коэффициент — малая терция, большая терция, чистая кварта, золотое сечение — и получите гармоничный набор размеров для заголовков и основного текста.
• Генератор box-shadow — Добавляйте несколько слоёв теней, меняйте смещение, размытие, spread и непрозрачность на живой карточке, затем скопируйте CSS для box-shadow или text-shadow.
• Генератор CSS-градиентов — Создайте градиент визуально: перетаскивайте цветовые стопы, меняйте угол или тип, начните с готового пресета — и скопируйте готовый CSS с запасным сплошным цветом.
• Конвертер единиц — Переводите метрические, имперские и технические единицы в десяти категориях.