Работа с медиа-запросами JavaScript

От автора: что в первую очередь приходит в голову, когда вы думаете о медиа-запросах? Может быть, что-то в файле CSS.

Что-то в файле CSS, что выглядит так:

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Но знаете ли вы, что у нас есть медиа-запросы и для JavaScript? Это так! Возможно, мы не так часто видим их в JavaScript, но определенно есть варианты их использования, которые я на протяжении многих лет считаю полезными для создания адаптивных плагинов, таких как слайдеры. Например, при определенном разрешении вам может потребоваться перерисовать и пересчитать элементы слайдера.

Работа с медиа-запросами в JavaScript сильно отличается от работы с ними в CSS, хотя концепции схожи: сопоставьте некоторые условия и примените некоторые вещи.

Использование matchMedia()

Чтобы определить, соответствует ли документ строке медиа-запроса в JavaScript, мы используем метод matchMedia(). Несмотря на то, что он официально является частью спецификации модуля представления объектной модели CSS, находящейся в статусе рабочего проекта, его поддержка браузером великолепна даже в Internet Explorer 10 с глобальным охватом 98,6%.

Эти данные о поддержке браузером взяты с Caniuse, где есть более подробная информация. Число указывает, что браузер поддерживает эту функцию в этой версии и выше.

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

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

Это базовое использование для сопоставления условий медиа в JavaScript. Мы создаем условие соответствия (matchMedia()), которое возвращает объект (MediaQueryList), проверяем его (.matches), а затем делаем что-нибудь, если условие истинно. Почти как в CSS!

Но это еще не все. Например, если бы мы изменили размер окна ниже целевого размера, ничего не изменится так, как это будет с CSS, прямо из коробки. Это потому, что .matches идеально подходит для одноразовых мгновенных проверок, но не может постоянно проверять наличие изменений. Значит, нам нужно…

Прослушивать изменения

MediaQueryList имеет метод addListener() (и последующие removeListener()), который принимает функцию обратного вызова (представленную событием .onchange), которая вызывается при изменении статуса медиа-запроса. Другими словами, мы можем запускать дополнительные функции при изменении условий, что позволяет нам «реагировать» на обновленные условия.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

И matchMedia() и MediaQueryList дают нам такую же возможность не только проверять условия медиа, которые предоставляет CSS, но и активно реагировать на обновленные условия.

Когда вы регистрируете прослушиватель событий addListener(), он изначально не срабатывает. Нам нужно вызвать функцию обработчика событий вручную и передать медиа-запрос в качестве аргумента.

Старый способ сделать это

Ради контекста — и немного ностальгии — я хотел бы осветить старый, но все еще популярный способ выполнения «медиа-запросов» в JavaScript (и, да, эти цитаты здесь важны). Самый распространенный подход — привязать прослушиватель событий resize, который проверяет window.innerWidth или window.innerHeight.

Вы все еще увидите что-то подобное в реальной среде:

Поскольку событие изменения размера вызывается при каждом изменении размера браузера, это затратная операция! Глядя на влияние пустой страницы на производительность, мы можем увидеть разницу.

Работа с медиа-запросами JavaScript

Это на 157% больше скриптов!

Еще более простой способ увидеть разницу — с помощью журнала консоли.

Работа с медиа-запросами JavaScript

Это 208 событий изменения размера по сравнению с шестью совпадающими событиями медиа.

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

Заключение

Мы рассмотрели медиа-запросы в JavaScript! Мы исследовали, как matchMedia() позволяет нам определять условия медиа, и исследовали объект MediaQueryList, который позволяет нам выполнять одноразовые (.matches) и постоянные ( addListener()) проверки на соответствие этим условиям, чтобы мы могли реагировать на изменения (.onchange), вызывая функции.

Мы также рассмотрели «старый» способ делать что-то, прослушивая событие resize в окне. Хотя он по-прежнему широко используется и является абсолютно законным способом реагирования на изменения размера window.innerWidth, он не может выполнять проверки расширенных состояний медиа.

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

Автор: Marko Ilic

Источник: //css-tricks.com

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.