CSS clamp()

Генерируйте адаптивные значения CSS clamp() для плавной типографики

Об этом калькуляторе

Калькулятор CSS clamp создаёт «резиновое» выражение clamp(min, preferred, max), которое линейно масштабирует значение между двумя ширинами области просмотра. Задайте минимальное и максимальное значение (в rem или px) и диапазон ширины области просмотра — калькулятор найдёт наклон в vw и свободный член прямой, проходящей через обе точки, а для проверки выведет вычисленные значения в каждой контрольной точке. Для rem предполагается корневой размер шрифта 16px. Для перевёрнутых диапазонов выводятся ошибки проверки. Идеален для адаптивной типографики и отступов.

«CSS clamp()»: как пользоваться

  1. Введите или вставьте данные в поле.
  2. Посмотрите результат — он обновляется мгновенно по мере ввода.
  3. При необходимости настройте параметры под свою задачу.
  4. Скопируйте URL страницы, чтобы поделиться именно этим результатом.

Типичные примеры

  • 1rem при 320px → 2rem при 1280px → clamp(1rem, 1.6667vw + 0.6667rem, 2rem)
  • 1.25rem при 375px → 3rem при 1440px → clamp(1.25rem, 2.6291vw + 0.6338rem, 3rem)
  • 16px при 320px → 32px при 1200px → clamp(16px, 1.8182vw + 10.1818px, 32px)

Часто задаваемые вопросы

«CSS clamp()»: как это работает?

Введите или вставьте данные, и инструмент обработает их прямо в браузере, сразу показав результат. Ничего из введённого не загружается на сервер — все вычисления происходят на вашем устройстве.

«CSS clamp()»: когда пригодится?

Он удобен в разработке, отладке, дизайне и администрировании — всякий раз, когда нужно быстро выполнить это преобразование или проверку, ничего не устанавливая и не доверяя свои данные стороннему сервису.

Насколько надёжны результаты?

Инструмент напрямую реализует соответствующий стандарт или спецификацию, поэтому его результат совпадает с тем, что выдаёт совместимое ПО. О пограничных случаях, например пустом или некорректном вводе, сообщается явно, а не молча.

Можно ли поделиться конкретным результатом с кем-то?

Да. Введённые данные обновляют URL, поэтому достаточно скопировать адресную строку и отправить ссылку — у получателя инструмент откроется в том же состоянии.