min()

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

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

Кратко

Скопировано

Функция min() возвращает минимальное значение из указанных.

Пример

Скопировано
        
          
          .selector {  width: min(50%, 500px);}
          .selector {
  width: min(50%, 500px);
}

        
        
          
        
      

Как пишется

Скопировано

Функция принимает одно или несколько аргументов. Все аргументы разделяются запятыми.

Аргументы могут быть:

  • абсолютными, например 500px;
  • относительными, например 50% или 20vw или 1rem;
  • комбинацией абсолютных и относительных;
  • математическими выражениями, например 20rem * 2;
  • другими функциями: max(), clamp(), min().

Пример вложения других функций и математического выражения:

        
          
          .selector {  width: min(20rem * 2, max(100px, 30%));}
          .selector {
  width: min(20rem * 2, max(100px, 30%));
}

        
        
          
        
      

Использовать min() можно в любых 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), что означает: элемент занимает 50% ширины вьюпорта, но не больше 350 px.

Подсказки

Скопировано

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