clamp()

Обратите внимание, что использование clamp() для размеров шрифтов, как в этих примерах, позволяет устанавливать размер шрифта, который увеличивается с размером области просмотра, но не уменьшается ниже минимального размера шрифта или выше максимального размера шрифта. Он имеет тот же эффект, что и код в Жидкая типографика, но в одной строке и без использования медиа-запросов.

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

min

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

val

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

max

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

Выражения могут быть математическими функциями (см. calc() для получения дополнительной информации), литеральными значениями, другими выражениями, которые приводят к типу данных, допустимому в качестве аргумента (например, <length>), или вложенными функциями min() и max(). Для математических выражений можно использовать сложение, вычитание, умножение и деление без использования самой функции calc(). Также можно использовать скобки для определения порядка вычислений, если это необходимо.

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

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

• Математические выражения, включающие проценты для ширины и высоты столбцов таблицы, групп столбцов таблицы, строк таблицы, групп строк таблицы и ячеек таблицы в таблицах с автоматическим и фиксированным макетом, могут обрабатываться так, как если бы было указано auto.
• Разрешено вкладывать функции max() и min() как значения выражений, в этом случае внутренние функции рассматриваются как простые скобки. Выражения представляют собой полные математические выражения, поэтому можно использовать непосредственное сложение, вычитание, умножение и деление без использования самой функции calc().
• Выражение может представлять собой значения, объединяющие операторы сложения (+), вычитания (-), умножения (*) и деления (/), используя стандартные правила приоритета операторов. Не забудьте поставить пробел с каждой стороны операндов + и -. Операнды в выражении могут быть любым значением синтаксиса <length>. Для каждого значения в выражении можно использовать разные единицы измерения. Также можно использовать скобки для определения порядка вычислений, если это необходимо.
• Часто необходимо использовать функции min() и max() внутри функции clamp().

clamp(MIN, VAL, MAX) разрешается как max(MIN, min(VAL, MAX)).

В зависимости от указанных параметров функция возвращает <length>, <frequency>, <angle>, <time>, <percentage>, <number> или <integer>.

<clamp()> = 
  clamp( [ <calc-sum> | none ] , <calc-sum> , [ <calc-sum> | none ] )  

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*  

<calc-product> = 
  <calc-value> [ [ '*' | '/' ] <calc-value> ]*  

<calc-value> = 
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )  

<calc-keyword> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN        

В этом примере веб-страница использует min(), max() и clamp() для задания размеров отзывчиво.

Пример изменяет размеры элементов страницы тремя способами:

• длину строк текста
• размер шрифта абзацев
• размер шрифта заголовков

Во всех трёх случаях страница использует комбинацию единиц, относительных к области просмотра (vw и <percentage>), для задания размера, изменяющегося в зависимости от ширины области просмотра, и значения, которое не является относительным к области просмотра (rem и px) для реализации минимальных и/или максимальных размеров.

Пример находится по адресу https://mdn.github.io/css-examples/min-max-clamp/. Откройте его в новом окне и попробуйте изменить ширину окна.

Длина строки (контролируемая шириной width элемента <body>) будет увеличиваться по мере увеличения ширины окна, но только до определённого момента (1000px), и за этим моментом она больше не будет увеличиваться. Мы используем min() для задания максимальной длины строки: она может быть меньше 1000px, но не будет больше. Это полезно, потому что длинные строки сложнее читать, поэтому мы часто хотим ограничить их длину. Для этого мы используем min(1000px, calc(70% + 100px)): когда результат расчёта на основе процентов превышает 1000px, мы переключаемся на фиксированное значение 1000px.

Размер шрифта абзаца, контролируемый размером шрифта font-size элемента <p>, уменьшается по мере сужения окна, но только до определённого момента, и за этим моментом (в момент, когда 1.2vw меньше 1.2rem) он больше не уменьшается: он остаётся 1.2rem. Мы используем max() для задания минимального размера шрифта: размер шрифта может быть больше 1.2rem, но никогда не будет меньше. Это полезно, потому что очень мелкий текст сложно читать. Для этого используется max(1.2rem, 1.2vw). Это означает, что font-size будет установлено на 1.2rem, если вычисленное значение 1.2vw больше, чем 1.2rem, в этом случае оно будет установлено на 1.2vw вместо этого.

Размер шрифта заголовка, контролируемый размером шрифта font-size элемента <h1>, имеет относительное к области просмотра значение с максимальным и минимальным порогами. Для этого используется clamp(1.8rem, 2.5vw, 2.8rem). Значение, относительное к области просмотра, — 2.5vw, но оно ограничено между 1.8rem и 2.8rem, поэтому:

• если вычисленное значение 2.5vw меньше 1.8rem, то используется 1.8rem
• если вычисленное значение 2.5vw больше 2.8rem, то используется 2.8rem.

Это предотвращает слишком маленький размер шрифта заголовка в очень узком окне или слишком большой в очень широком окне.

HTML

<h1>Simple responsive test</h1>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. In orci orci,
  eleifend id risus nec, mattis rutrum velit. Suspendisse fringilla egestas erat
  eu convallis. Phasellus eu velit ut magna dapibus elementum cursus at ligula.
  Ut tempus varius nibh, nec auctor sapien iaculis sit amet. Fusce iaculis,
  libero quis elementum viverra, nulla ante accumsan lectus, sit amet convallis
  lacus ipsum vel est. Curabitur et urna non est consectetur pulvinar vel id
  risus. Ut vestibulum, sem in semper aliquet, felis arcu euismod sapien, ac
  imperdiet massa nisl quis sem. Vestibulum ac elementum felis, in tempor velit.
  Pellentesque purus ex, mattis at ornare quis, porta condimentum mi. Donec
  vestibulum ligula vel nulla blandit, quis euismod nulla vestibulum.
  Suspendisse potenti. Nunc neque mauris, tempor sed facilisis at, ultrices eget
  nulla. Pellentesque convallis ante nec augue porttitor, id tempus ante luctus.
</p>

<p>
  Integer rutrum sollicitudin tellus, quis cursus nulla scelerisque nec. Nunc eu
  facilisis lorem. Maecenas faucibus sapien eleifend, semper tellus at, pharetra
  quam. Cras feugiat vulputate tortor at rhoncus. Class aptent taciti sociosqu
  ad litora torquent per conubia nostra, per inceptos himenaeos. Nam non felis
  quis sem lobortis sodales vel id libero. Phasellus sit amet placerat lorem.
</p>

CSS

html {
  font-family: sans-serif;
}

body {
  margin: 0 auto;
  width: min(1000px, calc(70% + 100px));
}

h1 {
  letter-spacing: 2px;
  font-size: clamp(1.8rem, 2.5vw, 2.8rem);
}

p {
  line-height: 1.5;
  font-size: max(1.2rem, 1.2vw);
}

• calc()
• max()
• min()
• Значения CSS