JS об'єкт MediaQueryList

Об'єкт MediaQueryList у JavaScript

Об'єкт MediaQueryList у JavaScript є потужним інструментом, який дозволяє вам взаємодіяти з медіа-запитами безпосередньо зі скрипту. У сучасному веб-розробництві адаптивний дизайн є ключовою вимогою. Це означає, що ваш сайт або веб-додаток повинен коректно відображатися на різних пристроях з різними розмірами екрану та орієнтацією.

Створення та використання MediaQueryList

MediaQueryList створюється за допомогою метода window.matchMedia(). Цей метод приймає медіа-запит як аргумент і повертає об'єкт MediaQueryList.

Приклад:

let mql = window.matchMedia('(max-width: 600px)');
console.log(mql.matches);  // повертає true, якщо ширина екрану менша або дорівнює 600px, інакше - false

У цьому прикладі ми створюємо MediaQueryList для визначення, чи є ширина екрану користувача меншою або дорівнює 600 пікселям.

Події MediaQueryList та їх обробники

Однією з найцікавіших особливостей MediaQueryList є можливість відслідковувати зміни у результаті медіа-запиту. Це робиться за допомогою події change.

Приклад:

let mql = window.matchMedia('(max-width: 600px)');

function handleWidthChange(e) {
    if (e.matches) {
        console.log('Екран має ширину до 600 пікселів');
    } else {
        console.log('Екран більший за 600 пікселів');
    }
}

mql.addEventListener('change', handleWidthChange);

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

правити

Властивості MediaQueryList

Об'єкт MediaQueryList включає в себе декілька ключових властивостей, які допомагають розробникам отримати доступ до інформації про медіа-запит та дізнатися, чи задовольняє поточний стан пристрою вказаним умовам.

matches:

• Опис: Ця властивість вказує, чи задовольняє поточний стан пристрою умовам медіа-запиту.
• Тип даних: Boolean (true або false).
• Приклад:

let mql = window.matchMedia('(max-width: 600px)');
if (mql.matches) {
		console.log('Екран менше 600 пікселів у ширину');
} else {
		console.log('Екран 600 пікселів або більше у ширину');
}

В цьому прикладі, якщо ширина екрану користувача менше 600 пікселів, властивість matches поверне true, і в консолі буде виведено повідомлення про це. У протилежному випадку виведеться інше повідомлення.

media:

• Опис: Властивість media дозволяє отримати рядкове представлення медіа-запиту, асоційованого з конкретним об'єктом MediaQueryList.
• Тип даних: String.
• Приклад:

let mql = window.matchMedia('(orientation: portrait)');
console.log(mql.media);  // Виведе: "(orientation: portrait)"

Тут ми створили об'єкт MediaQueryList для визначення орієнтації екрану (портретна). Властивість media дозволить нам перевірити, який саме медіа-запит було використано.

Ці властивості роблять MediaQueryList дуже корисним, коли вам потрібно робити умовні перевірки або відслідковувати зміни у відповідності до медіа-запитів, не використовуючи CSS.

правити

Порада

Старайтеся формулювати медіа-запити якнайбільш конкретно, щоб уникнути небажаних перетинів. Наприклад, замість того, щоб використовувати (min-width: 600px)' та '(min-width: 900px), використовуйте (min-width: 600px) and (max-width: 899px).

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

Порада

Коли ви використовуєте об'єкт MediaQueryList, не забудьте використовувати подію change, щоб відслідковувати зміни стосовно відповідності медіа-запиту. Це особливо корисно, коли вам потрібно динамічно адаптуватися до змін умов пристрою користувача.

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

Порада

Коли ви використовуєте MediaQueryList для внесення динамічних змін у ваш інтерфейс, може бути корисно використовувати функції-обгортки або допоміжні бібліотеки для спрощення коду та зменшення його дублювання.

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

Порада

Не всі браузери можуть підтримувати MediaQueryList або окремі види медіа-запитів. Перед використанням переконайтеся, що ви додали відповідні перевірки підтримки:

if (window.matchMedia) {
    let mql = window.matchMedia('(max-width: 600px)');
    // ... ваш код
}

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

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

Синтаксис

let mediaQueryList = window.matchMedia(<string>);

Переглядачі

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

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

Переглядач
	9	6	5.1	12.1	12

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

Переглядач
	37	18	6	5

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

Переглядач
	0.10.0	1.0

Приклади

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

<div class="navbar">перший елемент navbar</div>
<div class="navbar">другий елемент navbar</div>

let mql = window.matchMedia('(max-width: 768px)');

function adaptNavbar(e) {
    const navbar = document.querySelector('.navbar');
    if (e.matches) {
        navbar.classList.add('hamburger-menu');
    } else {
        navbar.classList.remove('hamburger-menu');
    }
}

mql.addEventListener('change', adaptNavbar);
adaptNavbar(mql); // Для первісної установки стилю навігаційної панелі

let mql = window.matchMedia('(prefers-color-scheme: dark)');

function toggleTheme(e) {
    if (e.matches) {
        document.body.classList.add('dark-theme');
    } else {
        document.body.classList.remove('dark-theme');
    }
}

mql.addEventListener('change', toggleTheme);
toggleTheme(mql); // Для первісної установки теми

let mql = window.matchMedia('(forced-colors: active)');

function notifyHighContrast(e) {
    if (e.matches) {
        alert('Ви використовуєте режим високого контрасту. Дизайн сайту може відрізнятися.');
    }
}

mql.addEventListener('change', notifyHighContrast);
notifyHighContrast(mql); // Для первісного виявлення установок