Web-it-blog/26.06.17

Медиа запросы на JavaScript

Если сегодня вы спросите практически у любого front-end разработчика о том, каким способом он будет адаптировать веб-сайт для различных разрешений экранов и различных устройств, то в большинстве случаев вы услышите - с помощью медиа запросов на CSS. Но есть ли другой метод, благодаря которому можно добиться того же результата. Давайте же рассмотрим один из таких методов на примере ниже.

matchMedia

Знакомьтесь, matchMedia - метод, который позволяет тестировать медиа запросы CSS непосредственно на JavaScript. Он используется вместе с глобальным объектом window и записывается следующим образом:

window.matchMedia("(min-width: 480px)");

Данный метод возвращает объект, в котором имеется результат обработки строки, переданной медиа запросам. Стоит помнить, что если вы указываете диапазон разрешения экрана одновременно и в CSS и на JavaScript, то при изменении этого диапазона в CSS можно забыть поменять его в JavaScript, и наоборот, и это в конечном итоге может привезти к багам и сайт будет работать некорректно.

Далее обернем window.matchMedia в переменную JavaScript, чтобы в дальнейшем ее использовать еще раз.

var screenWidth = window.matchMedia("(max-width: 769px)");

Если мы хотим проверить, истинно ли условие, то можно воспользоваться свойством .matches.

var screenWidth = window.matchMedia("(max-width: 769px)");
if (screenWidth.matches) {
	element.classList.remove('class');  #Код сработает, если ширина экрана не больше 769px
}

Использование matchMedia на практике.

matchMedia обычно используется, когда требуется увеличить динамичность страницы. Конечно, вы можете просто прописать медиа запросы на CSS и скрыть элементы на маленьких устройствах за счет display: none, но вы точно потеряете в той же самой динамичности(уменьшиться скорость передачи данных; элементы, которые скрыты для пользователя, но при этом видны браузеру, будут подгружаться на страницу, тем самым, увеличив скорость её загрузки), в отличие от matchMedia, благодаря которому можно загружать стили или другие элементы лишь в том случае, если ширина экрана будет соответствовать необходимой для их отображения.

Если говорить о кроссбраузерности, тот тут все хорошо, matchMedia поддерживается всеми современными браузерами, за исключением старых версий Internet Explorer(до 10 версии). Эту проблему можно обойти, если поискать в интернете старый добрый полифилл, который добавит этот метод в старые браузеры.