Калькулятор CSS clamp()
Задайте размеры для малых и больших экранов и получите адаптивное значение clamp() для плавного масштабирования шрифтов, отступов и полей.
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)Результат содержит компонент rem в среднем терме, благодаря чему текст масштабируется при изменении масштаба страницы до 200% (значение только в единицах вьюпорта не позволило бы этого сделать).
Адаптивный текст идеального размера.
Все вычисления выполняются полностью в вашем браузере. Никакие вводимые данные не отправляются на BroBroGo.
Частые вопросы
Как калькулятор рассчитывает значение clamp()?
Вы задаете две точки: размер на малом экране и размер на большом. Калькулятор строит прямую линию между ними, чтобы размер плавно увеличивался по мере расширения экрана, а затем оборачивает это в функцию clamp(), чтобы значение никогда не опускалось ниже минимума и не превышало максимум. Между этими границами размер масштабируется адаптивно, а за их пределами фиксируется на ближайшем лимите.
Почему результат выдается в rem и vw, а не в пикселях?
Границы задаются в rem, а изменяемая средняя часть также содержит rem-компонент. Благодаря этому текст масштабируется, когда пользователь увеличивает масштаб страницы или меняет размер шрифта по умолчанию в браузере (значения в пикселях или только во вьюпортах могут нарушить эту доступность). Вы вводите размеры в пикселях для удобства, а инструмент переводит их в rem на основе базового размера шрифта.
Можно ли использовать это для отступов, а не только для шрифтов?
Да. Полученное значение отлично подходит для padding, margin, gap, width или height — везде, где используются размеры. Переключите режим предпросмотра на «Блок», чтобы увидеть, как меняются отступы вместо текста. Если минимальный и максимальный размеры совпадают, результат превратится в обычное фиксированное значение, так как масштабировать нечего.
Все ли браузеры поддерживают clamp()?
Да, все современные браузеры поддерживают clamp() еще с 2020 года, так как это стандарт. При очень больших максимальных размерах или высокой скорости масштабирования стоит проверить доступность при масштабе 200%, чтобы убедиться, что текст увеличивается для пользователей, которым это необходимо.