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