min()

Функция, выбирающая меньшее значение. Удобно для адаптивной вёрстки и не только!

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

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

Пример

Секция статьи "Пример"
        
          
          .selector {  width: min(50%, 500px);}
          .selector {
  width: min(50%, 500px);
}

        
        
          
        
      

Как пишется

Секция статьи "Как пишется"

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

        
          
          .selector {  width: min(50%, calc(1000px / 2), 700px);}
          .selector {
  width: min(50%, calc(1000px / 2), 700px);
}

        
        
          
        
      

Использовать функцию можно в любых CSS-свойствах, значение которых является числом, например:

        
          
          .selector {  background: linear-gradient(135deg, #2c3e50, #2c3e50 min(20vw, 60%), #3498db);}
          .selector {
  background: linear-gradient(135deg, #2c3e50, #2c3e50 min(20vw, 60%), #3498db);
}

        
        
          
        
      

Как это понять

Секция статьи "Как это понять"

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

Открыть демо в новой вкладке

В примере выше использованы значения min(50vw, 350px), что буквально означает: элемент занимает половину ширины вьюпорта, но не больше 350 px.

Подсказки

Секция статьи "Подсказки"

💡 Очень удобно с помощью функции min() ограничивать ширину компонента в зависимости от ширины родителя.