Калькулятор CSS clamp
Превратите минимальный и максимальный размер плюс две ширины вьюпорта в плавное значение CSS clamp(), вычисляемое вживую в вашем браузере.
Калькулятор CSS clamp работает целиком в вашем браузере. Ширины вьюпорта, размеры и корневой размер шрифта, которые вы вводите, никогда не покидают ваше устройство, и ничего не загружается в ArrayKit.
Открыть конвертер единиц CSS
Об инструменте Калькулятор CSS clamp
Калькулятор CSS clamp превращает четыре числа — минимальный и максимальный размер в пикселях плюс две ширины вьюпорта, которым они соответствуют, — в готовое к вставке значение clamp() для плавной типографики и отступов. Он проводит прямую между вашими двумя опорными точками, вычисляет наклон в vw и точку пересечения в rem и фиксирует результат на вашем минимуме ниже малого вьюпорта и на максимуме выше большого. Ползунок живого предпросмотра показывает точный отрисованный размер при любой ширине между ними, так что вы можете оценить кривую на глаз перед выпуском. Скопируйте сырое значение clamp(), объявление font-size или произвольное значение Tailwind. Всё вычисляется на вашем устройстве — вводимые размеры остаются в браузере, и ничего не загружается в ArrayKit.
Возможности
- Генерируйте значение clamp(minRem, slopeVw + interceptRem, maxRem) из четырёх чисел
- Ползунок живого предпросмотра показывает отрисованный размер при любой ширине вьюпорта
- Задайте собственный корневой размер шрифта, чтобы управлять преобразованием px → rem
- Показывает точный наклон в vw и точку пересечения в rem за значением
- Скопируйте сырое значение clamp(), объявление font-size или класс Tailwind
- Пресеты для основного текста, заголовков, крупного заголовка и плавных отступов
- Обрабатывает нисходящие кривые, где размер уменьшается с ростом вьюпорта
- Работает целиком в вашем браузере, размеры никуда не отправляются
Как использовать Калькулятор CSS clamp
- Введите минимальную и максимальную ширину вьюпорта в пикселях
- Введите минимальный и максимальный размеры, которых элемент должен достичь при этих ширинах
- Скорректируйте корневой размер шрифта, если он отличается от стандартных 16px
- Перетащите ползунок предпросмотра, чтобы проверить отрисованный размер по всему диапазону
- Скопируйте значение clamp() или объявление CSS в свою таблицу стилей
Пример
Ввод
min viewport 320px, max viewport 1200px
min size 16px, max size 24px, root 16px
Результат
font-size: clamp(1rem, 0.8182rem + 0.9091vw, 1.5rem);
16px при 320px вырастает до 24px при 1200px и держится ровно за пределами этой полосы.
Частые ошибки и устранение неполадок
- Текст никогда не вырастает больше минимального размера. — Проверьте, что минимальный вьюпорт меньше максимального — перевёрнутый диапазон делает кривую плоской, так что предпочитаемый член никогда не выигрывает в пределах границ.
- Размеры выглядят неверно после изменения корневого размера шрифта. — Значения rem в clamp() относительны к корню. Если ваша страница задаёт html { font-size } отличным от 16px, укажите то же значение в поле корня, чтобы вывод в rem разрешался в ожидаемые пиксели.
- Значение масштабируется слишком агрессивно на очень широких экранах. — Средний член продолжает расти до максимального вьюпорта. Уменьшите максимальную ширину вьюпорта или максимальный размер, чтобы кривая раньше достигала потолка и оставалась ограниченной за ним.
- clamp() игнорируется в старом браузере. — clamp() широко поддерживается в современных браузерах. Для очень старых целей задайте сначала статический font-size как запасной вариант и позвольте clamp() переопределить его там, где он поддерживается.
Часто задаваемые вопросы
- Как калькулятор CSS clamp вычисляет наклон в vw?
- Он проводит прямую через две опорные точки: наклон = (maxSize − minSize) / (maxViewport − minViewport). Поскольку 100vw равно ширине вьюпорта, коэффициент vw в значении — это наклон, умноженный на 100, а точка пересечения в rem — это то, что остаётся, когда прямую продлевают назад к вьюпорту нулевой ширины.
- Почему средний член смешивает rem и vw?
- Предпочитаемое значение — это прямая: фиксированная часть, не зависящая от ширины (точка пересечения в rem), плюс часть, растущая с вьюпортом (наклон в vw). Смешение двух позволяет размеру плавно масштабироваться между минимумом и максимумом, а не прыгать на брейкпоинте.
- Использовать ли px или rem в границах clamp?
- Границы в rem учитывают пользовательскую настройку размера шрифта в браузере, что лучше для доступности, поэтому этот инструмент выводит rem по умолчанию. Можно переключить показ на px, но границы clamp в rem — более безопасный выбор для размера текста.
- Можно ли использовать то же значение clamp() для отступов (margin) и промежутков (gap)?
- Да. clamp() работает для любой длины, поэтому значение применяется к padding, margin, gap и дорожкам сетки так же, как к font-size. Используйте пресет плавных отступов как отправную точку и скорректируйте минимальный и максимальный размеры.
- Какой корневой размер шрифта вводить?
- Используйте то, что ваша страница задаёт на элементе html — 16px является стандартом браузера и умолчанием инструмента. Если вы масштабируете корень в другом месте, введите это значение, чтобы вывод в rem отображался в те пиксели, которые вы действительно видите.
- Загружаются ли вводимые мной размеры куда-либо?
- Нет. Калькулятор CSS clamp работает целиком в вашем браузере. Ширины вьюпорта и размеры, которые вы вводите, используются только для вычисления значения на вашем устройстве и никогда не отправляются в ArrayKit.
Связанные инструменты
Все инструменты ArrayKit