Генератор clamp() для CSS

Как пользоваться

1. Выберите Свойство, введите Наименьший размер и Наибольший размер, затем выберите Единица размеров.
2. Введите две ширины в полях Ширина окна, при которой размер наименьший и Ширина окна, при которой размер наибольший, и выберите их единицу.
3. Если вы где-то использовали rem, проверьте Размер корневого шрифта (px). Браузеры используют 16 px, если сайт не задаёт другой размер.
4. Скопируйте Объявление CSS или проверьте Вычисление и Размер при распространённых ширинах, чтобы увидеть результат при каждой ширине.

Как clamp() делает размер плавным

clamp(MIN, VAL, MAX) принимает минимум, предпочтительное значение и максимум. Спецификация CSS Values and Units (на английском) говорит, что он означает то же, что max(MIN, min(VAL, MAX)). Поэтому размер никогда не опускается ниже MIN и не поднимается выше MAX, а между ними следует за VAL, который здесь представляет собой прямую, зависящую от ширины окна.

Прямая идёт от наименьшего размера при наименьшей ширине окна до наибольшего размера при наибольшей ширине. За пределами этих двух ширин размер остаётся на месте.

наклон = (наибольший размер − наименьший размер) / (наибольшая ширина − наименьшая ширина);  свободный член = наименьший размер − наклон × наименьшая ширина;  предпочтительное значение = свободный член + наклон × 100vw

Наклон, свободный член и член vw

Наклон показывает, насколько растёт размер на каждый пиксель ширины окна. Свободный член — это точка, где та же прямая пересекает нулевую ширину окна. Единица vw — это один процент ширины окна, поэтому наклон, умноженный на 100, даёт член, который следует за окном.

Обе ширины и оба размера переводятся в пиксели до вычисления наклона. Значение в rem умножается на размер корневого шрифта, поэтому один и тот же макет даёт тот же результат в rem или в px, когда корневой шрифт 16 px.

• Наибольший размер должен быть не меньше наименьшего. Инструмент отказывается от меньшего наибольшего размера, потому что такая прямая уменьшалась бы по мере роста экрана.
• Член vw не следует за настройкой размера текста у посетителя, а свободный член в rem следует. Проверяйте страницу при масштабе 200 %, а свободный член по возможности задавайте в rem.

Частые вопросы