CSS function minmax

Опис

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

Ось простий приклад її використання:

grid-template-columns: minmax(200px, 400px);

У цьому прикладі елемент сітки матиме ширину від 200px до 400px, залежно від доступного простору. Це дає гнучкість у відображенні елемента, адаптуючи його до різних розмірів екрану.

Значення, які можна використовувати для minimum та maximum, залежать від властивості CSS, до якої ви застосовуєте функцію minmax(). Наприклад, для властивостей, що визначають ширину (width), можна використовувати значення, які приймаються для ширини елемента.

правити

Порада

Експериментуйте з різними значеннями minimum та maximum, щоб знайти оптимальні параметри для вашого дизайну.

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

Нотатка

Ця функція особливо корисна в контексті сіток (grid) та резинових макетів (flexbox), де елементи повинні адаптуватися до різних розмірів екрану або контейнерів. Використовуючи minmax(), можна забезпечити, що дизайн залишається зрозумілим та ефективним на всіх пристроях і розмірах екрану.

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

Нотатка

Зверніть увагу на підтримку браузерами функції minmax(), особливо якщо ви плануєте використовувати її в проекті. Впевніться, що ваш цільовий браузер підтримує цю функцію або розгляньте альтернативні підходи для забезпечення сумісності.

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

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

Синтаксис

minmax(minimum, maximum);

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

<minimum>

Значення, що визначає мінімальну ширину, довжину або розмір елемента. Може бути вказане у пікселях (px), відсотках (%), вьюпортах (vw), елементах шрифту (em, rem), тощо.

автор: Bond

правити

<maximum>

Значення, що визначає максимальну ширину, довжину або розмір елемента. Може бути вказане у пікселях (px), відсотках (%), вьюпортах (vw), елементах шрифту (em, rem), тощо.

автор: Bond

правити

Переглядачі

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

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

Переглядач
	57	52	10.1	44	16

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

Переглядач
	57	57	52	10.3

Приклади

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