Генератор CSS clamp()
Генерируйте плавное значение CSS clamp(), которое масштабируется между двумя шириной viewport.
Генератор CSS clamp()
Плавная типография и отступы масштабируют значение по мере изменения размера viewport, вместо прыжков между фиксированными размерами на нескольких контрольных точках медиа-запросов. Этот инструмент строит это значение за вас: введите минимальный и максимальный размер и ширину viewport, где они применяются, и он вернёт функцию CSS clamp() с линейной интерполяцией между ними, готовую вставить в таблицу стилей.
Минимальный размер и максимальный размер устанавливают два конца шкалы; минимальная и максимальная ширина viewport определяют, где каждый конец начинает действовать — ниже минимальной ширины значение остаётся на своем минимуме, выше максимума остаётся на своем потолке, а между ними растёт линейно с viewport. Единица измерения переключает вывод между px и rem, размер корневого шрифта управляет преобразованием px-в-rem, а количество десятичных знаков контролирует точность сгенерированных чисел. Формат вывода оборачивает тот же clamp() как обычное объявление, пользовательское CSS свойство или класс Tailwind с произвольным значением, чтобы вы могли вставить его прямо в любую кодовую базу, с которой работаете.
Включение проверки доступности добавляет заметку, когда настройка может вызвать проблемы: размеры на основе px игнорируют предпочтение размера шрифта браузера читателя, а слишком маленький минимум остаётся трудно читаемым даже до того, как начнёт масштабироваться. Обе это распространённые ошибки в ручных формулах плавного типа, и инструмент флагирует их вместо молчаливой отправки.
Всё вычисляется в вашем браузере по мере регулировки опций — ничто, что вы вводите, никуда не отправляется. Когда результат выглядит правильно, скопируйте его, загрузите как .txt файл или отправьте в ввод другого инструмента, чтобы продолжить работу над ним.