max()

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

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

Демо

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

Синтаксис

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

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

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

Спецификации

• CSS Values and Units Module Level 4

Поддержка браузерами

Пример

Установка минимального размера шрифта

Еще один вариант использования функции 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() как поиск минимально допустимого значения свойства.

Ссылки

• MDN max()

Комментарии