Рекомендации по курсу:

Функция CSS clamp()

Определение и использование CSS clamp() Функция используется для установки значения, которое адаптивно изменяется между минимальным и максимальным значениями в зависимости от размера视ора.

clamp() Функция имеет три параметра: минимальное значение, предпочтительное значение и максимальное значение. Если предпочтительное значение находится в указанном диапазоне, браузер выбирает предпочтительное значение; в противном случае, браузер выбирает минимальное или максимальное значение.

Пример

Установите минимальный размер шрифта для элемента <h1> в 2rem и максимальный размер шрифта в 3.5rem. В то же время установите минимальный размер шрифта для элемента <p> в 1rem и максимальный размер шрифта в 2.5rem:

h1 {
  font-size: clamp(2rem, 2.5vw, 3.5rem);
}
p {
  font-size: clamp(1rem, 2.5vw, 2.5rem);
}

Попробуйте сами

Грамматика CSS

clamp(min, preferred, max)

Технические детали

Поддержка браузера

Числа в таблице указывают на версию браузера, которая полностью поддерживает эту функцию.