min()

В первом примере ширина не будет превышать 200px, но будет меньше, если ширина области просмотра меньше 400px (в этом случае 1vw будет 4px, а 50vw — 200px). Этот метод использует абсолютную единицу для задания фиксированного максимального значения свойства и относительную единицу, чтобы значение могло уменьшаться для более узких областей просмотра.

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

Выражения могут быть математическими выражениями (с использованием арифметических операторов), литеральными значениями или другими выражениями, такими как attr(), которые приводят к допустимому типу аргумента (например, <length>).

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

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

<min()> = 
  min( <calc-sum># )  

<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() для задания максимального размера шрифта убедитесь, что шрифт по-прежнему можно масштабировать как минимум на 200% для удобочитаемости (без использования вспомогательных технологий, таких как функция масштабирования).

• Объяснения MDN Understanding WCAG, Guideline 1.4
• Понимание успеха критерия 1.4.4 | W3C Understanding WCAG 2.0

Другое применение min() — это установка максимального размера на отзывчивых элементах форм: это позволяет ширине меток и полей ввода уменьшаться по мере уменьшения ширины формы.

Рассмотрим пример CSS:

input,
label {
  padding: 2px;
  box-sizing: border-box;
  display: inline-block;
  width: min(40%, 400px);
  background-color: pink;
}

form {
  margin: 4px;
  border: 1px solid black;
  padding: 4px;
}

В данном случае сама форма, включая отступы, границы и поля, будет занимать 100% ширины родительского элемента. Мы устанавливаем ширину метки и поля ввода как меньшее из двух значений: 40% от ширины формы или 400px, что означает, что максимальная ширина метки и поля ввода составит 400px. Минимальная ширина будет равна 40% от ширины формы, что на экране смарт-часов будет очень маленьким значением.

<form>
  <label for="misc">Type something:</label>
  <input type="text" id="misc" name="misc" />
</form>

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