Как использовать медиа-запросы в JavaScript?

Feb 11 2023

Довольно часто можно наблюдать за изменением размеров в javascript (для выполнения некоторых функций). Широко распространено решение этой ситуации путем добавления прослушивателя событий на «изменение размера», что не является лучшим решением этой проблемы, по крайней мере, в большинстве случаев.

В этой статье я продемонстрирую эффективный способ справиться с такими ситуациями в JavaScript. Я сравню два подхода, выполняющих одно и то же: метод matchMedia и прослушиватель событий «resize».

Я покажу минусы и плюсы каждого метода, покажу, как им пользоваться, и по ходу приведу примеры.

« Метод Windowинтерфейса matchMedia()возвращает новый MediaQueryListобъект, который затем можно использовать для определения соответствия documentстроке медиа-запроса, а также для отслеживания документа, чтобы определить, когда он соответствует (или перестает соответствовать) этому медиа-запросу».

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

@media (min-width: 768px) {
  body {
    background-color: coral;
  }
}

Метод matchMedia() возвращает MediaQueryList с результатами запроса.

mediaQueryList — это объект с тремя свойствами:

соответствует: (true/false) соответствует ли экран условиям медиа-запроса.
media: (строка) сам медиа-запрос, в основном строка, которую вы вставили
onchange: (функция) метод прослушивателя, который принимает функцию обратного вызова, которая вызывается при изменении состояния мультимедиа.

Использование почти идентично медиа-запросам CSS. Мы передаем строку медиа-запроса в matchMedia(), а затем проверяем свойство «matches».

window.matchMedia("min-width: 768px").onchange = (e) => {
  if (e.matches) {
    // the screen was below 768 and now it's above or equal
    document.body.style.backgroundColor = "coral";
  }
}

Типичный и наиболее распространенный способ, которым многие разработчики управляют изменением размера экрана в JavaScript, — это привязка прослушивателя событий изменения размера, который проверяет ширину документа.

window.addEventListener("resize", function() {
  if (document.body.clientWidth >= 768) {
    document.body.style.backgroundColor = "coral";
  }
});

Вы также можете увидеть разницу в console.log: событие изменения размера будет срабатывать каждый раз, когда изменяется размер браузера, в то время как matchMedia будет запускаться только один раз после того, как оно соответствует медиа-запросу.

«Даже если мы не обращаем внимания на проблемы с производительностью, изменение размера является ограничительным в том смысле, что оно не позволяет нам писать расширенные медиа-запросы для таких вещей, как печать и ориентация. Таким образом, хотя он и имитирует поведение «медиа-запроса», позволяя нам сопоставлять ширину области просмотра, он не может сопоставить многое другое — и мы знаем, что настоящие медиа-запросы способны на гораздо большее».

В заключение мы обсудили потребности matchMedia и рассмотрели, как это позволяет нам определять условия мультимедиа и проверять объект mediaQueryList, который позволяет нам запускать наш код один раз, когда он соответствует условию, и постоянно, устанавливая метод «onchange». из списка медиазапросов.

Мы сравнили метод matchMedia с привязкой прослушивателя событий изменения размера, что позволило нам изучить наиболее подходящий способ реагирования на изменения размера экрана.

Попутно я приводил примеры, что все делают одно и то же (устанавливая backgroundColor тела на коралловый), чтобы показать, как его писать при каждом подходе.

Если у вас есть какие-либо вопросы относительно этого поста или какие-либо предложения, исправления или примечания, не стесняйтесь комментировать, писать по электронной почте или DM. Спасибо за чтение!