Функция CSS `max()`

max() CSS функция позволяет задать наибольшее (наиболее положительное) значение из списка выражений, разделённых запятыми, в качестве значения свойства CSS. Функцию max() можно использовать везде, где допускаются <length>, <frequency>, <angle>, <time>, <percentage>, <number> или <integer>.

Попробуйте

width: max(20vw, 400px);

width: max(20vw, 100px);

width: max(5vw, 100px);

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <img
      alt="Firefox logo"
      class="logo"
      src="/shared-assets/images/examples/firefox-logo.svg" />
  </div>
</section>

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

Синтаксис

max(1, 2, 3)
max(1px, 2px, 3px)

Параметры

Функция 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> | '/' <number> ]*

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

<calc-constant> = 
  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: изменение размера текста | WAI | W3C

Примеры

Задание минимального размера шрифта

Ещё один вариант использования 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()
• Изучите: значения и единицы измерения