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

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

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

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

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

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

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

MatchMedia — это своего рода медиа-запрос для JavaScript, с его помощью вы можете применять различные варианты использования для определенных разрешений, например, на экранах с разрешением менее 768 пикселей установить для «фонового цвета» тела значение: «коралловый».

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

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

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

Чтобы обрабатывать события изменения размера с помощью matchMedia, вы устанавливаете метод onchange для функции, которая получает mediaQueryList как событие.

Использование почти идентично медиа-запросам 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";
  }
}

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

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

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

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

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

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

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

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

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

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

Источники и дополнительная литература:

https://enmascript.com/articles/2018/10/31/the-underestimated-power-behind-window-matchmedia

https://css-tricks.com/working-with-javascript-media-queries/

https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia

https://webdevetc.com/blog/matchmedia-events-for-window-resizes/

Спасибо Хилалу Ризеку.

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

Похожие вопросы