Генератор CSS clamp()
Задайте минимальный и максимальный размер и диапазон ширины окна, к которому они
применяются, — получите плавное значение clamp(), гладко масштабирующееся
между ними.
Как это работает
Две точки (ширина окна, размер) задают прямую линию. Её наклон становится коэффициентом
при ширине окна просмотра, а точка пересечения с осью Y — фиксированным смещением в rem;
вместе они образуют clamp(min, intercept + slope*100vw, max). Поскольку это
настоящий CSS, а не JavaScript-обработчик изменения размера, браузер пересчитывает
значение при каждом проходе вёрстки без рывков при прокрутке и без мелькания неверного
размера, а инструмент продолжает работать даже при отключённом JavaScript.
Все значения переводятся в rem с учётом заданного базового размера шрифта, поэтому результат остаётся корректным, даже если пользователь изменил базовый размер шрифта браузера для удобства чтения. Инструмент ничего не считывает с вашей страницы — он лишь вычисляет формулу по введённым вами числам.
Частые вопросы
Что на самом деле делает clamp()?
clamp(min, preferred, max) выбирает среднее из трёх значений, но не даёт результату опуститься ниже min или подняться выше max. В данном случае «предпочитаемое» значение — линейная функция от ширины окна просмотра, поэтому результат плавно растёт вместе с экраном, пока не упрётся в одну из границ, а затем остаётся неизменным.
Зачем использовать это вместо медиазапроса?
Медиазапрос перескакивает между фиксированными размерами на определённых точках перелома, что может выглядеть как заметный скачок. clamp() масштабируется непрерывно вместе с окном просмотра, поэтому текст и отступы плавно меняются при изменении размера окна, и не нужно поддерживать никаких breakpoint'ов.
Отправляется ли это куда-либо?
Нет, формула и предпросмотр полностью вычисляются в вашем браузере. Ничего не загружается.