Статьи

Использование медиазапросов в коде JavaScript

Декабрь 22, 2018

Использование медиазапросов в JavaScriptОдним из замечательных дополнений в CSS3 является возможность использовать медиа-запросы . Медиа-запросы — это запросы, написанные на CSS, которые позволяют вам проверять различные типы медиа, такие как экран, разрешение, печать и многое другое. После проверки запроса вы сможете использовать CSS в качестве ответа для проверенного носителя. Это происходит автоматически, но что, если вы хотите проверить мультимедиа и навязать некоторую логику, которая не нужна, связанная со стилем или адаптивным дизайном? Ответ будет обсуждаться в этом посте.

Обратите внимание, что API, написанный в этом посте, находится в черновом состоянии, и в будущем он может измениться.

Использование медиазапросов в JavaScript

Итак, вы хотите использовать медиа-запросы в вашем коде JavaScript.

Первое, что нужно знать, это новый объект MediaQueryList . Объект MediaQueryList представляет собой список всех медиазапросов к объекту документа. Объект MediaQueryList отправляет уведомления зарегистрированным слушателям, когда медиа-запросы к документу изменяют свое состояние. Объект MediaQueryList включает в себя две функции, которые добавляют и удаляют прослушиватели: addListener и removeListener . Вот пример добавления слушателя событий:

mql.addListener(handleScreenChange);

Он также включает в себя два свойства:

  • совпадения :  возвращает истину, если документ соответствует списку медиазапросов, в противном случае — ложь.
  • media : список медиа-запросов, хранящийся в объекте MediaQueryList .

Для того , чтобы получить MediaQueryList объект , который нужно использовать matchMedia функцию. Функция matchMedia получает строку медиа-запроса и возвращает объект MediaQueryList . Затем вы можете использовать свойство совпадений, чтобы проверить результат запроса или добавить прослушиватели событий для обработки изменений медиазапросов. В следующем примере показан скрипт, который используется для записи изменений экрана консоли:

(function () {           
    function resize() {
        if (window.matchMedia('only screen and (max-width: 320px)').matches) {
            console.log('under 320 pixels');                    
        } else if (window.matchMedia('only screen and (min-width: 321px) and ' +
                                     '(max-width: 1024px)').matches) {
            console.log('between 320 and 1024 pixels');                    
        } else {
            console.log('higher than 1024 pixels');                    
        }
    }
 
    window.addEventListener('resize', resize, false);
    resize();
}());

В этом примере я регистрируюсь на событие изменения размера окна . Когда происходит изменение размера окна, выполняется проверка различных медиазапросов, и соответствующее сообщение записывается на консоль. Вы можете избежать регистрации в событии resize, если добавите прослушиватель в список медиазапросов:

(function () {
            function resize() {
                var mql = window.matchMedia('only screen and (max-width: 320px)').addListener(function () {
                    console.log('under 320 pixels');
                });
                var mql1 = window.matchMedia('only screen and (min-width: 321px) and ' +
                                             '(max-width: 1024px)').addListener(function () {
                                                 console.log('between 320 and 1024 pixels');
                                             });
                var mql2 = window.matchMedia('only screen and (min-width: 1025px)').addListener(function () {
                    console.log('higher than 1024 pixels');
                });
            }
            
            resize();
        }());

Обратите внимание на использование removeListener, когда вам не нужно получать уведомления, когда происходят проверки медиа-запросов.

Поддержка API JavaScript медиазапроса доступна в Chrome версии 9, Firefox версии 6, IE10 и Safari версии 5.1. Opera не поддерживает этот API в настоящее время.

Резюме

Медиа-запросы помогают поддерживать адаптивный дизайн, который реагирует на различные медиа. Если вы хотите использовать медиа — запросы из JavaScript вы можете использовать MediaQueryList объект и matchMedia функцию.

36
Share: