На деле хватает одной строки CSS:
font-size: clamp(1rem, 2vw + 0.5rem, 2rem);
Как это работает:
Сразу задаются три значения: минимальный размер, предпочтительный (плавающий) размер и максимальный размер.
Браузер выбирает подходящее среднее значение, но при этом никогда не уходит ниже минимума и выше максимума.
Например:
*
1rem = минимум (16px). Текст никогда не станет меньше 16px.*
2vw + 0.5rem = предпочтительный размер. Плавно масштабируется вместе с шириной вьюпорта.*
2rem = максимум (32px). Текст не станет больше 32px даже на огромных мониторах.Результат:
Текст масштабируется в зависимости от ширины экрана. Без breakpoints, без media queries. Просто плавная адаптивная типографика.
Где использовать:
* Заголовки, которым нужно масштабирование
* Основной текст в hero-секциях
* Любой текст, который должен подстраиваться под размер экрана
Поддержка в браузерах: около 95%
Одна функция.
И адаптивная типографика готова.
@WebDev_Plus