Дизайн / Адаптивность
Генератор CSS clamp() для гибкой типографики и отступов
Укажите минимальный и максимальный размер, а также ширину области просмотра, при которой применяется каждый из них. Вы получите выражение clamp() в rem, которое плавно масштабируется между этими значениями, и таблицу размеров для распространённых ширин экрана.
Генератор CSS clamp() для гибкой типографики и отступов: Инструмент проводит прямую линию через две точки: от 16 px при ширине области просмотра 320 px до 24 px при 1280 px размер увеличивается на 0.8333 px на каждые 100 px ширины. Линия записывается как фиксированная часть rem плюс часть vw — 0.8333rem + 0.8333vw, а clamp() ограничивает её значениями от 1rem до 1.5rem за пределами этого диапазона. Работает на 100% локально в вашем браузере, файлы на сервер не загружаются.
- Категория
- Инструменты для разработчиков
- Запуски
- В вашем браузере
- Стоимость
- Бесплатно · без регистрации
- Доступность
- Готово к использованию
Полностью работает в браузере
CSS
font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);
| Ширина области просмотра | Размер |
|---|---|
| 320 px | 16 px |
| 375 px | 16,46 px |
| 768 px | 19,73 px |
| 800 px | 20 px |
| 1024 px | 21,87 px |
| 1280 px | 24 px |
| 1440 px | 24 px |
| 1920 px | 24 px |
Среднее значение clamp() — это прямая линия, проходящая через заданные вами две точки: к доле ширины области просмотра добавляется фиксированное значение в rem, поэтому размер плавно изменяется между двумя значениями ширины и ограничивается заданными пределами за их пределами. Использование rem для фиксированной части позволяет учитывать собственную настройку размера шрифта читателя. Это работает с любой длиной: размером шрифта, внутренними отступами, интервалами и внешними отступами.
Пример расчёта
Для заголовка размером 32 px на телефоне с шириной 375 px и 48 px на компьютере с шириной 1440 px наклон равен 16 ÷ 1065 = 1.5023 px на каждые 100 px, а выражение имеет вид clamp(2rem, 1.6479rem + 1.5023vw, 3rem). На планшете шириной 800 px заголовок будет иметь размер 38.38 px.
Доступность
WCAG требует, чтобы текст можно было увеличить до 200%. Поскольку часть гибкого размера зависит от области просмотра, при слишком крутом наклоне масштабирование может перестать заметно увеличивать текст; разница между наибольшим и наименьшим размером должна быть не более примерно 2.5 раза. Для выбора согласованных шагов используйте генератор типографической шкалы.
Как пользоваться
- Укажите минимальный и максимальный размер в px.
- Укажите ширины области просмотра, при которых должны применяться эти значения.
- Скопируйте значение clamp() и проверьте размеры в таблице.
Конфиденциальность и ограничения
Расчёты выполняются в вашем браузере.
Похожие инструменты
Часто задаваемые вопросы
Почему бы просто не использовать vw?
Размер, заданный только в vw, не учитывает настройку размера шрифта читателя и может стать слишком маленьким на телефонах или огромным на широких экранах. Часть rem и ограничения в clamp() решают обе проблемы.
clamp() работает везде?
Да: все современные браузеры поддерживают clamp() начиная с 2020 года.
Может ли размер уменьшаться на более широких экранах?
Да: укажите больший размер для минимальной ширины, и выражение вместо этого будет вычитать часть vw.
Бесплатный инструмент · запусков: в вашем браузере · аккаунт не нужен