Полезное плавное значение является прямой только между двумя выбранными ширинами. Ниже первой точки оно остаётся на нижней границе, выше второй — на верхней. CSS clamp() выражает три области одним значением, если предпочтительное выражение содержит верные наклон и пересечение.
Найдите точный наклон между точками
Пусть малая точка — ширина V1 и значение S1, большая — V2 и S2. Наклон в пикселях значения на пиксель ширины равен (S2 − S1) / (V2 − V1). Для 320px → 16px и 1200px → 32px точный наклон равен 16/880, то есть 1/55. Рациональное число исключает дрейф двоичной арифметики до форматирования CSS.
Найдите пересечение при нулевой ширине
Пересечение в px равно S1 − наклон × V1. Это не рекомендация для нулевой ширины, а постоянный член прямой, проходящей через выбранные точки. В примере это 560/55px, около 10.181818px. При корне 16px получается около 0.636364rem.
Преобразуйте наклон в коэффициент vw
Один vw равен одному проценту ширины, поэтому наклон умножают на 100. Коэффициент примера равен 100/55, около 1.818182vw. Вместе с пересечением и границами получается clamp(1rem, 0.636364rem + 1.818182vw, 2rem). Десятичная запись приближает рациональную прямую, поэтому важна проверка границ.