Медиа запросы в Javascript

Синтаксис вызова:

mql = window.matchMedia(mediaQueryString)

Возвращает новый объект MediaQueryList, представляющий результаты указанной строки медиа-запроса.

Свойства:

  • MediaQueryList.matchestrue, если документ удовлетворяет медиа-запросу
  • MediaQueryList.media — строка с сериализированным медиа-запросом

События:

  • MediaQueryList.onchange — функция-обработчик, вызываемая когда срабатывает медиа-запрос

Методы:

  • MediaQueryList.addListener()
  • MediaQueryList.removeListener()

Пример 1

if (window.matchMedia("(min-width: 400px)").matches) {
  /* вьюпорт больше 400px */
} else {
  /* вьюпорт меньше 400px */
}

Пример 2

var para = document.querySelector('p');

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

function screenTest(e) {
  if (e.matches) {
    /* the viewport is 600 pixels wide or less */
    para.textContent = 'This is a narrow screen — less than 600px wide.';
    document.body.style.backgroundColor = 'red';
  } else {
    /* the viewport is more than than 600 pixels wide */
    para.textContent = 'This is a wide screen — more than 600px wide.';
    document.body.style.backgroundColor = 'blue';
  }
}

mql.addListener(screenTest);

Пример 3

// media query event handler
if (matchMedia) {
  const mq = window.matchMedia("(min-width: 500px)");
  mq.addListener(WidthChange);
  WidthChange(mq);
}

// media query change
function WidthChange(mq) {
  if (mq.matches) {
    // window width is at least 500px
  } else {
    // window width is less than 500px
  }

}

Поддержка браузерами

Десктопные версии браузеров:

  • Chrome 9
  • Edge +
  • Firefox (Gecko) 6
  • Internet Explorer 10
  • Opera 12.1
  • Safari 5.1

Мобильные версии браузеров:

  • Android 3.0
  • Edge +
  • Firefox Mobile (Gecko) 6.0
  • IE Mobile -
  • Opera Mobile 12.1
  • Safari Mobile 5

Ссылки