max()

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

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

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

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

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

<max()> = 
  max( <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        

При использовании max() для управления размером текста, убедитесь, что текст всегда достаточно большой, чтобы его можно было прочитать. Предложение — использовать функцию min(), вложенную в max(), у которой вторым значением является относительная единица длины, которая всегда достаточно велика для чтения. Например:

small {
  font-size: max(min(0.5vw, 0.5em), 1rem);
}

Это гарантирует минимальный размер 1rem, а размер текста масштабируется, если страница увеличивается.

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

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

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

h1 {
  font-size: 2rem;
}
h1.responsive {
  font-size: max(4vw, 2em, 2rem);
}

Размер шрифта будет как минимум равен 2rem, или дважды размеру шрифта по умолчанию для страницы. Это гарантирует читабельность и доступность.

<h1>This text is always legible, but doesn't change size</h1>
<h1 class="responsive">
  This text is always legible, and is responsive, to a point
</h1>

Подумайте о функции max() как о поиске минимального допустимого значения для свойства.

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