Как работает функция clamp() и где её применять?

`clamp(min, preferred, max)` возвращает значение, которое растёт вместе с preferred, но не выходит за пределы min и max.

Адаптивная типографика

h1 {
  font-size: clamp(1.5rem, 2vw + 1rem, 3rem);
}

• На узком экране заголовок не меньше 1.5rem.
• Между границами плавно растёт вместе с шириной окна.
• На широком экране не больше 3rem.

Где ещё

.container {
  width: clamp(320px, 90%, 1200px); /* ширина с границами */
  padding-inline: clamp(16px, 4vw, 48px);
}

Одно правило заменяет несколько media query, поэтому интерфейс масштабируется плавно, а не скачками.

Родственные функции

min() берёт наименьшее значение, max() наибольшее: width: min(100%, 600px).

Доступность

Размеры лучше задавать в rem или смешивать rem с vw, чтобы пользовательское увеличение шрифта продолжало работать.

Коротко для собеседования

clamp задаёт значение с нижней и верхней границей и плавным ростом между ними, что убирает много media query.