Программирование медиа-запросов

Прежде чем вы сможете оценить результаты медиа-запроса, вам необходимо создать объект MediaQueryList, представляющий запрос. Для этого используйте метод window.matchMedia.

Например, чтобы настроить список запросов, определяющих, находится ли устройство в ландшафтном или портретном ориентации:

const mediaQueryList = window.matchMedia("(orientation: portrait)");

После создания списка медиа-запросов вы можете проверить результат запроса, посмотрев значение его свойства matches:

if (mediaQueryList.matches) {
  /* The viewport is currently in portrait orientation */
} else {
  /* The viewport is not currently in portrait orientation, therefore landscape */
}

Если вам необходимо отслеживать изменения в результатах запроса в режиме реального времени, эффективнее зарегистрировать слушатель, чем постоянно проверять результат запроса. Для этого вызовите метод addEventListener() на объекте MediaQueryList с функцией обратного вызова, которая будет вызываться при изменении состояния медиа-запроса (например, при переходе теста медиа-запроса от true к false):

// Create the query list.
const mediaQueryList = window.matchMedia("(orientation: portrait)");

// Define a callback function for the event listener.
function handleOrientationChange(mql) {
  // …
}

// Run the orientation change handler once.
handleOrientationChange(mediaQueryList);

// Add the callback function as a listener to the query list.
mediaQueryList.addEventListener("change", handleOrientationChange);

Этот код создает список медиа-запросов, проверяющий ориентацию, и добавляет к нему обработчик событий. После определения обработчика мы также вызываем его непосредственно. Это позволяет нашему обработчику вносить коррективы, основанные на текущей ориентации устройства; в противном случае наш код мог бы предположить, что устройство находится в портретном режиме при запуске, даже если на самом деле оно в ландшафтном.

Функция handleOrientationChange() будет анализировать результат запроса и обрабатывать необходимые действия при изменении ориентации:

function handleOrientationChange(evt) {
  if (evt.matches) {
    /* The viewport is currently in portrait orientation */
  } else {
    /* The viewport is currently in landscape orientation */
  }
}

Выше, мы определяем параметр как evt — объект события типа MediaQueryListEvent, который также включает свойства media и matches, чтобы вы могли получить эти характеристики объекта MediaQueryList, напрямую обращаясь к нему или к объекту события.

Чтобы прекратить получение уведомлений об изменениях значения вашего медиа-запроса, вызовите removeEventListener() на объекте MediaQueryList, передав ему имя ранее определенной функции обратного вызова:

mediaQueryList.removeEventListener("change", handleOrientationChange);

• Медиа-запросы
• Модуль CSS медиа-запросы
• Модуль CSS объект модели
• window.matchMedia()
• MediaQueryList
• MediaQueryListEvent