Генератор CSS clamp()
Создайте плавный размер CSS clamp() (адаптивная типографика) между двумя ширинами экрана.
- Мгновенно
- Бесплатно
- Приватно (обработка локально)
- Без регистрации
Размер, следующий за экраном
Укажите мин. и макс. размер и соответствующие ширины экрана: инструмент посчитает значение clamp() для вставки в CSS, с предпросмотром, реагирующим на ширину окна.
-
Мин./макс. размер
Напр. 16px до 24px.
-
Опорные экраны
Напр. 320px до 1280px.
-
Скопируйте clamp()
В font-size, padding и т. д.
Пример: 16 → 24px (320 → 1280px)
| Показатель | Значение |
|---|---|
| Мин./макс. размер | 16px / 24px = 1rem / 1.5rem |
| Экраны | 320px → 1280px |
| Плавный наклон | 0.833vw |
| Результат | clamp(1rem, 0.833rem + 0.833vw, 1.5rem) |
При 320px размер 16px, при 1280px — 24px, между ними меняется линейно. Расчёт 100 % локальный.
Частые вопросы
Зачем нужен clamp()?
Функция CSS clamp(мин, предпочт., макс) ограничивает значение между минимумом и максимумом, а предпочтительное значение адаптируется к ширине экрана. Это современный способ делать плавные размеры шрифта без медиазапросов.
Как считается предпочтительное значение?
Проводят прямую между (мин ширина, мин размер) и (макс ширина, макс размер). Средняя часть сочетает фиксированную базу в rem и наклон в vw, например 0.833rem + 0.833vw, ограниченную min/max в rem.
Зачем смешивать rem и vw?
vw увеличивает размер с шириной окна (плавность); rem добавляет фиксированную базу, чтобы наклон не начинался с нуля. Комбинация даёт линейный, читаемый рост, уважающий пользовательский зум.
Нужно ли сохранять min и max?
Да. Без границ текст был бы крошечным на малых экранах и огромным на очень больших. clamp() фиксирует значение за пределами вашего диапазона опорных ширин.