/tool/clamp-generator/ работает считает браузер
Задайте размер на узком экране и на широком, укажите ширины, между которыми он растёт, — и получите строку clamp() вместо трёх медиазапросов. Можно взять сразу всю шкалу: кегли заголовков по модульному соотношению или набор отступов от 3xs до 3xl.
Между двумя ширинами размер идёт по прямой; за ними — упирается в границы.
Сейчас в вашем окне
—px
Проверка доступности считается вместе со строкой.
Образец
Тем же значением набран этот образец
——Считает браузер. Ни числа, ни готовые строки никуда не отправляются: файл собирается прямо на устройстве, а ссылка для обмена лежит в адресной строке.
По горизонтали — ширина от 320 до 2560 px, по вертикали — размер в пикселях. Полки слева и справа: там значение упёрлось в границу.
График строится по тем же числам, что и таблица.
Возьмите два размера из макета: телефонный и десктопный. Кнопка «Разобрать» принимает их одной строкой вида 375:20, 1440:48 — четыре поля заполнятся сами.
Ширины ставьте те, на которых макеты нарисованы. Нижнюю — самый узкий поддерживаемый экран, верхнюю — ширину контейнера, а не ширину монитора.
Нужна вся типографика разом — переключитесь на «Шкалу кеглей»: базовый кегль, соотношение на узком и на широком экране, число шагов вверх и вниз. На выходе набор --step--2 … --step-5. «Шкала отступов» тем же способом даёт --space-3xs … --space-3xl и пары вроде --space-s-m.
Оставьте единицы rem: слагаемое в rem обязательно. Строка из одного vw не отзывается на увеличение шрифта в настройках браузера — блок «доступность» показывает, во сколько раз вырастет текст при удвоении базового кегля и при zoom 200 %.
Ползунок «Ширина для примерки» двигает всю картину: образец, число «сейчас» и отметку на графике. Кнопка рядом возвращает ширину настоящего окна.
Вкладки под кодом дают одно и то же шестью способами: строка CSS, переменные в :root, SCSS, PostCSS с отдельными min и max, JSON-токены и кусок конфига Tailwind. Кнопка «Скачать файлом» сохраняет выбранную вкладку.
Кнопка «Скопировать ссылку» кладёт всю конфигурацию в адрес — ссылку можно отправить в чат, и коллега увидит ту же шкалу.
clamp(мин, наклон × 100 vw + сдвиг, макс), где наклон = (макс − мин) ÷ (ширина макс − ширина мин)
Средний аргумент clamp() — обычное значение, а не отдельный режим: браузер считает его на каждой ширине заново и обрезает границами. Медиазапросы для этого не нужны. Шкала считается тем же способом, просто строк на выходе не одна, а по числу шагов: у каждого шага свои мин и макс, а ширины общие.
Исходные данные — те же, что стоят в полях по умолчанию: их можно пересчитать в уме и убедиться, что инструмент не врёт.
Наклон: (32 − 16) ÷ (1200 − 400) = 16 ÷ 800 = 0,02.
Коэффициент vw: 0,02 × 100 = 2. То есть 2vw.
Сдвиг: 16 − 0,02 × 400 = 16 − 8 = 8 px. В rem это 8 ÷ 16 = 0.5rem.
Границы в rem: 16 ÷ 16 = 1rem и 32 ÷ 16 = 2rem.
Проверка на 400 px: 0.5rem это 8 px, 2vw это 8 px, сумма 16 px. Проверка на 1200 px: 8 + 24 = 32 px.
Доступность на 1280 px. Обычно там 8 + 25,6 = 33,6 px, потолок обрезает до 32. Читатель ставит базовый кегль 32 px вместо 16 — все rem удваиваются: 16 + 25,6 = 41,6 px при потолке 64. Было 32, стало 41,6 — это 130 %, а не 200 %, и WCAG 1.4.4 не выполнен. Инструмент показывает это число сразу: чтобы дотянуть до двойного, поднимают верхнюю границу или уменьшают долю vw.
font-size: clamp(1rem, 0.5rem + 2vw, 2rem);
По двум причинам. Во-первых, на узком экране такой кегль становится нечитаемо мелким, а на широком — нелепо крупным: границ нет. Во-вторых, размер, заданный только в vw, не реагирует на увеличение шрифта в настройках браузера — человек поднимает кегль, а текст не меняется. Слагаемое в rem внутри clamp() эту проблему снимает, и блок «доступность» показывает, насколько именно.
Две величины. Первая — во сколько раз вырастет значение, если читатель поставит базовый кегль вдвое больше. Вторая — что получится при масштабе страницы 200 %: там окно в CSS-пикселях сужается вдвое, доля vw остаётся прежней по физическому размеру, а часть в rem удваивается. Критерий WCAG 1.4.4 требует, чтобы текст доходил до 200 %. Если строка на вашей ширине уже упёрлась в максимум и вклад vw велик, роста не будет, и калькулятор об этом скажет.
Считается то же самое, но сразу для всех шагов. Вы задаёте базовый кегль на узком и на широком экране и соотношение — например 1,2 на телефоне и 1,25 на десктопе. Размер шага n равен базовому кеглю, умноженному на соотношение в степени n, отдельно для узкой и широкой ширины; дальше по этим двум числам строится обычный clamp(). На выходе набор переменных --step--2 … --step-5, который кладут в :root один раз.
Девять ступеней от --space-3xs до --space-3xl — базовый отступ, умноженный на 0,25; 0,5; 0,75; 1; 1,5; 2; 3; 4 и 6. Пара вроде --space-s-m берёт минимум у меньшей ступени, а максимум у большей: отступ растёт быстрее шага и хорошо ложится в вертикальный ритм между блоками.
Единицы vw считаются от окна, а cqi и cqw — от контейнера с container-type: inline-size. Если блок стоит в узкой колонке широкого экрана, vw даст ему кегль по монитору, а не по колонке. С контейнерными единицами ползунок «ширина для примерки» означает ширину контейнера, и таблица с графиком считаются от неё.
Даёт две прямые вместо одной. От нижней ширины до точки перегиба размер растёт с одним наклоном, дальше — с другим. В CSS это записывается как min() или max() из двух линейных выражений внутри clamp(): min() берётся, когда первый участок круче второго, max() — когда наоборот.
Так бывает у трекинга: чем крупнее кегль, тем плотнее буквы. Поставьте на узком экране большее значение, на широком — меньшее. Функция clamp() требует, чтобы первый аргумент был не больше третьего, иначе она всегда возвращает первый, — поэтому в готовой строке границы переставляются местами. Считается ровно то, что вы задали, и калькулятор об этой перестановке говорит.
Тогда наклон делить не на что, и линии не существует: калькулятор об этом скажет. Нужен диапазон, а не точка — иначе это обычный медиазапрос, а не флюидная величина.
Чтобы размер оставался связан с настройкой читателя. Значения в rem умножаются на его базовый кегль, значения в px — нет. Переключатель единиц здесь есть, но rem стоит по умолчанию не случайно: на px проверка доступности сразу показывает единицу вместо двойки.