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() там, де потрібно контролювати мінімальне значення 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

Приклади

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