CSS function 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(<value1>, <value2>, ...);

<number>

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

<expression>

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

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2