CSS clamp(): адаптивный шрифт без медиазапросов
Задайте минимальный и максимальный размер — калькулятор соберёт clamp(), и шрифт будет плавно тянуться за шириной экрана.
Потяните за правый нижний угол — размер посчитан от ширины блока, как будто это экран. Сейчас 1440px → 24.0px
Этот текст меняет размер вместе с шириной блока
Как работает clamp()
clamp() принимает три значения (минимум, предпочтительное и максимум) и держит результат в этих границах. Предпочтительное обычно завязано на ширину экрана через vw, поэтому размер плавно меняется вместе с окном, но никогда не проваливается ниже минимума и не улетает выше максимума.
/* clamp(минимум, предпочтительное, максимум) */
h1 {
font-size: clamp(2rem, 1.5rem + 2vw, 4rem);
}Этот заголовок не станет меньше 32px и больше 64px, а между этими границами будет плавно расти вместе с шириной окна, без единого медиазапроса.
Формула, если считать вручную
Калькулятор выше делает это автоматически, но саму формулу полезно знать. Коэффициент масштабирования — это разница размеров, делённая на разницу ширин экрана. Базовое значение — минимум минус коэффициент масштабирования, умноженный на минимальную ширину.
Дано: 16px при 320px viewport → 24px при 1200px viewport
коэффициент масштабирования = (24 − 16) / (1200 − 320) = 0.00909 → 0.909vw
базовое значение = 16 − 0.00909 × 320 = 13.09px → 0.818rem
font-size: clamp(1rem, 0.818rem + 0.909vw, 1.5rem);Частая опечатка — подставить одинаковые числа в оба слагаемых формулы. Тогда кривая уезжает, и на 320px вместо ровно 16px получится 17.5px. Проверяйте расчёт на обеих границах viewport.
Почему нельзя писать только vw
Самая частая и самая незаметная ошибка — задать предпочтительное значение чистым vw, без слагаемого в rem. vw зависит только от ширины окна и не реагирует на масштабирование страницы (Ctrl/Cmd + или зум браузера). Человек увеличил шрифт в настройках, а текст на сайте не изменился. Это нарушает WCAG 1.4.4: страница обязана оставаться читаемой при увеличении до 200%.
/* Плохо: размер зависит только от ширины окна, не от зума */
font-size: clamp(1rem, 2.5vw, 2rem);
/* Хорошо: rem-слагаемое реагирует на настройки пользователя */
font-size: clamp(1rem, 0.75rem + 1.5vw, 2rem);Вклад rem-слагаемого должен быть заметным, ориентир — не меньше половины итогового значения на типичной ширине экрана. Калькулятор выше считает такое слагаемое сам.
Поддержка браузерами
clamp() входит в Baseline с 2020 года и работает во всех современных браузерах без исключений. Запасные значения и полифилы не нужны.
Разбор формул, типичных ошибок и продвинутых техник (адаптивная сетка, cqi для компонентов, разница с line-clamp) есть в полном руководстве по CSS clamp().
Похожие инструменты
Другие полезные инструменты из той же категории
Часто задаваемые вопросы
Clamp() принимает три значения: минимум, желаемое и максимум — clamp(1rem, 2.5vw, 2rem). Браузер берёт среднее (обычно оно завязано на ширину экрана через vw), но не даёт ему опуститься ниже минимума и подняться выше максимума. Получается шрифт, который плавно растёт вместе с окном и при этом не превращается в нечитаемую мелочь на телефоне и в гигантский заголовок на широком мониторе.
Это разные вещи, которые легко перепутать. Clamp() — математическая функция, ограничивающая любое числовое значение: размер шрифта, отступ, ширину. А -webkit-line-clamp обрезает текст после заданного числа строк и ставит многоточие. Если вам нужно «показать только 3 строки и многоточие» — это line-clamp, а не clamp().
Один clamp() заменяет цепочку брейкпоинтов: font-size: clamp(1.5rem, 1rem + 2vw, 3rem). Единица vw привязывает размер к ширине окна, а минимум и максимум страхуют от крайностей. Медиазапросы при этом никуда не деваются — они по-прежнему нужны там, где меняется сама раскладка, а не размер.
Запись вида 1rem + 2vw — не украшение. Чистый vw полностью игнорирует пользовательскую настройку размера шрифта в браузере: человек увеличил шрифт, а текст не отреагировал. Слагаемое в rem возвращает эту зависимость, и текст остаётся масштабируемым для людей со слабым зрением.
Любые: rem, em, px, vw, vh, проценты — и даже выражения calc() внутри. Калькулятор выше работает с px и rem и сам переводит одно в другое, считая от базы 16px.