Перейти к содержанию

min()

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

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

Демо

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

Синтаксис

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

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

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

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

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

Data on support for the css-math-functions feature across the major browsers from caniuse.com

Пример

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

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

Давайте рассмотрим некоторые CSS:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
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;
}

Здесь сама форма вместе с margin, border и padding будет равна 100% ширины родительской формы. Мы объявляем, что input и label будут иметь ширину, меньшую из 40% от ширины формы до padding или 400px в зависимости от того, что меньше. Другими словами, наибольшая ширина label и input может составлять 400px. Наименьшее их сужение будет равно 40% от ширины формы, что на экране смарт-часов очень мало.

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

Комментарии