MediaQueryList

MediaQueryList - об'єкт для роботи з медіа-запитами CSS.

Синтаксис:

obMediaQueryList = window.matchMedia( mediaQueryString );

Параметри:

obMediaQueryList - зміна яка отримує об'єкт MediaQueryList медіа-запиту mediaQueryString.

window - об'єкт window. Не обов'язково вказувати.

mediaQueryString - рядок з медіа-запитом ("media query") CSS. Наприклад: "(min-width: 620px)", "(max-width: 720px)", "(orientation: portrait)".

Опис:

MediaQueryList - об'єкт для роботи з медіа-запитами CSS у JavaScript.

Метод matchMedia() повертає об'єкт MediaQueryList за вказаним "media query".

Зверніть увагу що сам JavaScript містить об'єкт screen.orientation для роботи з орієнтацією екрану і подію document.onresize при зміні розміру документу.

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

matches - логічне значення true або false, чи збігаються списки медіа-запитів в поточному документі.
media - рядок з медіа-запитом.

addListener - додає "слухача".
removeListener - видаляє "слухача".

Приклад:

if(window.matchMedia("screen and (min-width: 1024px)").matches)
alert('ширина документу більша або рівна: 1024px');
else alert('ширина документу менша 1024px');

function test(m) {
if (m.matches)
alert("ширина більше" + m.media);
else alert("ширина менше" + m.media);
}
mql = window.matchMedia("(min-width:320px)");
mql.addListener(test);