Функция clamp()CSS3-генератор ☛

Функция clamp() фиксирует среднее значение в диапазоне значений между определенной минимальной и максимальной границей. Функция принимает три параметра: минимальное значение, предпочтительное значение и максимально допустимое значение.

Синтаксис ?

Свойство: clamp(min, val, max)

Значения

Функция clamp(min, val, max) принимает в качестве параметров три выражения, разделенных запятыми.

min

Минимальное значение — это наименьшее (самое отрицательное) значение. Это нижняя граница диапазона допустимых значений. Если предпочтительное значение меньше этого значения, будет использоваться минимальное значение.

val

Предпочтительным значением является выражение, значение которого будет использоваться, пока результат находится между минимальным и максимальным значениями.

max

Максимальное значение — это наибольшее (наиболее положительное) значение выражения, которому будет присвоено значение свойства, если предпочтительное значение превышает эту верхнюю границу.

Вы можете использовать разные единицы измерения для каждого значения в ваших выражениях и разные единицы измерения в любой математической функции, составляющей любой аргумент.

При работе с функцией следует учитывать следующие аспекты:

• Математические выражения, включающие проценты ширины и высоты в столбцах таблицы, группах столбцов таблицы, строках таблицы, группах строк таблицы и ячейках таблицы как в таблицах с автоматическим, так и с фиксированным макетом, могут обрабатываться так, как если бы был указан auto.
• Допускается вложение функций max() и min() в качестве значений выражения, и в этом случае внутренние функции обрабатываются как простые круглые скобки. Выражения являются полными математическими выражениями, поэтому вы можете использовать непосредственное сложение, вычитание, умножение и деление без использования самой функции Calc().
• Выражение может представлять собой значения, сочетающие операторы сложения ( + ), вычитания ( - ), умножения ( * ) и деления ( / ) с использованием стандартных правил приоритета операторов. Обязаельно ставьте пробелы с каждой стороны операндов + и - . Операндами в выражении могут быть любые значения синтаксиса length. Вы можете использовать разные единицы измерения для каждого значения в выражении. При необходимости вы также можете использовать круглые скобки для установления порядка вычислений.
• Часто вам понадобится использовать min() и max() в функции clamp().
• clamp(MIN, VAL, MAX) разрешается как max(MIN, min(VAL, MAX))
• Поддержка браузера: 79   79   75   13.1

Пример

Чтобы обеспечить плавную типографику , Майк Ритмейллер популяризировал метод, который использует функцию clamp() для установки минимального и максимального размера шрифта и позволяет масштабировать его от минимального до максимального.

<title>Плавная типография</title>
<h1>I am fluid typography</h1>

body {
  display: grid;
  place-items: center;
  height: 90vh;}

h1 {
  text-align: center;
  font-family: system-ui, serif;
  font-size: clamp(1.5rem, 5vw, 3rem);}

С помощью clamp() вы можете написать это более четко. Вместо того, чтобы требовать сложную строку, браузер может сделать всю работу за вас. Установите минимально допустимый размер шрифта (например, 1.5rem для заголовка, максимальный размер (т. е. 3rem ) и идеальный размер 5vw.
Теперь мы получаем типографику, которая масштабируется в зависимости от ширины области просмотра страницы, пока не достигнет предельного минимального и максимального значений, в гораздо более лаконичной строке кода:

p {
  font-size: clamp(1.5rem, 5vw, 3rem);
}