Как это работает
Между двумя ширинами экрана значение растёт линейно, за их пределами — держится на минимуме или максимуме без «прыжков». clamp(МИН, ПРЕДПОЧТИТЕЛЬНОЕ, МАКС) — первое и третье значения задают нижнюю и верхнюю границу, среднее — формула из фиксированной части и vw (процента от ширины экрана), которая и даёт плавность. Подставьте результат прямо в CSS вместо обычного значения свойства.
Зачем rem, а не px
Результат в rem учитывает масштаб шрифта, который пользователь задал в браузере (у людей со слабым зрением он часто увеличен) — сохраняется доступность. px — вариант для свойств, где это не критично (например, gap между карточками), или если так удобнее интегрировать в существующий CSS.
Ограничения
Минимальная ширина экрана должна быть меньше максимальной — иначе формула не определена (деление на ноль), инструмент покажет ошибку вместо результата. Значения могут расти или убывать с шириной экрана — работает в обе стороны.
Калькулятор CSS clamp() онлайн — бесплатно
Пригодится для адаптивной типографики и отступов без брейкпоинтов — одна строка CSS вместо набора медиазапросов под каждый размер экрана. Ничего никуда не отправляется — всё считается в браузере.