Об этом инструменте
Традиционная адаптивная типографика скачками переключается между фиксированными размерами на каждой контрольной точке медиазапроса — 16px на мобильном, а затем резкий скачок до 20px после определённой ширины. CSS-функция `clamp(МИН, ПРЕДПОЧТИТЕЛЬНОЕ, МАКС)` заменяет этот скачок непрерывным масштабированием: размер шрифта плавно растёт вместе с областью просмотра между выбранными минимумом и максимумом. Ниже минимальной ширины области просмотра размер фиксируется на минимуме; выше максимальной — на максимуме. Гибким он остаётся только между ними.
Этот калькулятор сам выполняет интерполяцию: он вычисляет линейный наклон между минимальным и максимальным размером шрифта на выбранном диапазоне ширины области просмотра, выражает его как предпочтительное значение на основе `vw` и оборачивает всё в готовую строку `clamp()`. Вставьте результат прямо в `font-size` (или любое другое числовое свойство) — больше не нужны отдельные переопределения для каждой контрольной точки.
Частые вопросы
Почему стоит использовать clamp() вместо простого медиа-запроса?
Медиа-запросы скачкообразно переключаются между фиксированными размерами на брейкпоинтах, а clamp() плавно и непрерывно масштабируется между вашим минимумом и максимумом при изменении размера viewport — без заметного "скачка" на любой ширине.
Работает ли clamp() во всех браузерах?
Да — CSS clamp() поддерживается всеми основными браузерами (Chrome, Firefox, Safari, Edge) с 2020 года, поэтому сегодня его безопасно использовать в продакшене практически для всей аудитории без запасного варианта.