Что такое `clamp()`, `min()` и `max()` в CSS?

Суть

Это comparison-функции для вычисления значений на лету:

• min(a, b, …) — наименьшее из аргументов;
• max(a, b, …) — наибольшее;
• clamp(MIN, VAL, MAX) — то же, что max(MIN, min(VAL, MAX)): значение между нижней и верхней границей.

Частый паттерн «fluid typography»:

h1 {
  font-size: clamp(1.25rem, 2vw + 1rem, 2.5rem);
}
.sidebar {
  width: min(100%, 320px);
}

Нюансы

Аргументы могут быть разных единиц (px, %, vw, rem) — браузер приводит их к сопоставимым значениям в контексте. Внутри можно комбинировать calc().

clamp удобнее трёх медиазапросов для плавного масштабирования ширины, отступов и кегля.