Калькулятор CSS clamp()
Задайте размер для узкого окна и для широкого. Получите clamp(), который плавно меняется между ними, — в rem, поэтому размер шрифта, заданный читателем в браузере, по-прежнему учитывается.
Съешь ещё этих мягких булок
Типографская шкала
Почему rem, а не px
Размер в px игнорирует размер шрифта, который читатель выбрал в браузере. То же объявление в rem масштабируется вместе с ним: тот, кто поставил по умолчанию 20px, получит текст крупнее, а не ваши фиксированные 16. Слагаемое с viewport в любом случае остаётся в vw — это про ширину экрана, а не про предпочтения читателя.
Часто задаваемые вопросы
Что делает средний аргумент?
Это прямая через ваши две точки: свободный член плюс наклон в vw. Ниже малой ширины окна значение фиксируется на минимуме, выше большой — на максимуме.
Может ли максимум быть меньше минимума?
Да, clamp() всё равно отработает — но размер будет уменьшаться по мере роста экрана, а это почти никогда не то, что нужно. Страница предупреждает, если так получается.
Отправляется ли что-нибудь на ваши серверы?
Нет. Это арифметика в вашем браузере; ничего из набранного страницу не покидает.
Сделано командой GO AI. Все бесплатные инструменты