CSS min() — найменше з кількох значень

Опис

min() - функція в CSS, яка дозволяє контролювати значення властивостей шляхом вибору найменшого значення з набору числових значень або виразів. Ця функція є потужним інструментом для створення адаптивних та гнучких макетів на веб-сайті.

Функція min() дозволяє визначити значення властивостей на основі найменшого з переданих параметрів. Наприклад, якщо маємо елемент з властивістю width: min(200px, 50%, 25em), то функція min() обчислить значення і встановить ширину елемента як найменше з трьох значень: 200 пікселів, 50 відсотків від батьківського елемента або 25 em.

Однак, важливою рисою функції min() є те, що вона використовується для обчислення значень в момент рендерингу сторінки. Це означає, що якщо значення залежать від динамічних факторів, наприклад, розміру вікна перегляду, то значення будуть автоматично перераховуватись при зміні цих факторів.

Приклад використання:

Припустимо, що у нас є блок, який має змінювати свою ширину в залежності від розміру вікна перегляду, але не менше 300px і не більше 600px. Ми можемо використати функцію min() для цього:

width: min(600px, 50vw, 300px);

У цьому прикладі, якщо розмір вікна перегляду (viewport) менше 600px, ширина блоку буде рівна 50% розміру вікна. Але якщо розмір вікна перегляду перевищить 600px, ширина блоку буде фіксованою і становитиме 600px. Таким чином, за допомогою функції min() ми забезпечуємо адаптивну ширину блоку з врахуванням заданого діапазону значень.

правити

Загальний опис

правити

Порада

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

автор: Bond правити

Порада

Зверніть увагу на одиниці вимірювання, використовувані в різних значеннях. Вони можуть вплинути на порядок відображення мінімального значення.

автор: Bond правити

Нотатка

Враховуйте, що функція min() не обов'язково обмежена лише числовими значеннями. Ви можете використовувати її для порівняння будь-яких CSS виразів, таких як calc(), var(), rgba(), тощо.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

min(<value1>, <value2>, ...);

Функція min може отримувати 2 значень:

<number>

Числові значення, які можуть бути вказані з одиницями вимірювання, такими як пікселі (px), відсотки (%), em або rem. Функція min() порівняє числові значення і поверне найменше з них.

автор: Bond

правити

<expression>

Ви можете використовувати будь-який допустимий CSS вираз, такий як calc(), var(), rgba(), і так далі, які повертають числові значення.

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	79	75	11.1	66	79	—

Підтримка: мобільні переглядачі

Переглядач
	79	79	79	11.3

Приклади

+ запропонувати свій приклад у пісочниці

<div id="description">
  <h2>Приклад 1: зміна елемента</h2>
  <p>Наведіть курсор на елемент, щоб побачити зміну його розміру.</p>
</div>

<div id="result">
  <div class="box"></div>
</div>

#description {
  background: #f1f1f1;
  padding: 20px;
  font-family: Arial, sans-serif;
}

#result {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.box {
  width: min(100px, 50vw);
  height: min(100px, 50vh);
  background: dodgerblue;
  transition: all 0.3s ease;
}

.box:hover {
  width: min(200px, 80vw);
  height: min(200px, 80vh);
}

<div class="frame">
    <div class="block fixed">width: 40ch</div>
    <div class="block capped">width: min(100% - 2rem, 40ch)</div>
</div>

body {
    font-family: sans-serif;
    font-size: 15px;
    padding: 24px;
}

.frame {
    width: 240px;
    padding: 12px 0;
    border: 2px solid #b03030;
}

.block {
    box-sizing: border-box;
    margin: 0 auto 12px;
    padding: 8px 10px;
    background: #2f6f9f;
    color: #fff;
}

.fixed {
    width: 40ch;
}

.capped {
    width: min(100% - 2rem, 40ch);
}

<div id="description">
  <h2>Приклад 2: елемент з плинним фоновим кольором</h2>
  <p>Один з елементів має плинний перехід кольору з використанням функції <code>min()</code>.</p>
</div>

<div id="result">
  <div class="box"></div>
  <div class="box colored"></div>
</div>

#description {
  background: #f1f1f1;
  padding: 20px;
  font-family: Arial, sans-serif;
  margin-bottom: 50px;
}

#result {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.box {
  width: 200px;
  height: 200px;
  background: dodgerblue;
  margin-right: 20px;
}

.colored {
  background: linear-gradient(to right, dodgerblue, coral);
  background-size: min(100%, 200%);
  transition: background-size 0.5s ease;
}

.colored:hover {
  background-size: min(200%, 200%);
}