Loftschool школа онлайн обучения IT профессиям
Профессии
  • Веб-разработчик
  • Frontend с нуля
  • Frontend разработчик
  • Backend разработчик
  • Full Stack разработчик
  • UX/UI Дизайнер
  • Интернет-маркетолог
  • Android-разработчик
Курсы
            • Веб-тестирование
            • Основы вёрстки
            • Веб для начинающих
            • JavaScript
            • Vue.js
            • React.js
            • Node.js
            • PHP
            • UX/UI-дизайн: базовый
            • UX/UI-дизайн: PRO
            • Основы Python
            • Python: машинное обучение
            • Product Management
            • Контекстная реклама
            • SMM
            • SEO для всех
            • Android: базовый
            • Android: продвинутый

          Сентябрьская распродажа

          до 60%

          СКИДКИ

          До конца акции:
          02
          Дней
          00
          Часов
          00
          Минут
          • Главная
          • Блог
          • Видеоуроки
          • Изучаем matchMedia API и object MediaQueryList
          Полезный блог
          Дмитрий Ковальчук
          Автор блога Loftschool
          Опубликовано 22.05.2013 10:15

          Изучаем matchMedia API и object MediaQueryList

          Продолжаем осваивать управление media queries при помощи javascript. На этот раз речь пойдёт о matchMedia API. Как результат работы - вы получите готовый шаблон, который можно смело внедрять в свои проекты.

          В предыдущей статье, посвещенной enuire.js, мы говорили о том, как работать с media queries при помощи javascript. Enuire.js - замечательный инструмент для создания mobile-first сайтов и приложений, основанный на matchMedia API. Чтобы лучше понять тему, давайте с этим самым matchMedia и разберёмся.

          Предпосылки и источники

          Прежде всего, давайте разберёмся с совместимостью данной технологии с версиями браузеров. В этом нам поможет прекрасный сайт caniuse.com. Из таблицы видно, что все текущие версии браузеров, за исключением Opera Mini, поддерживают matchMedia. Что касается предыдущих версий - то тут, стоит обратить внимание главным образом на IE 9.0 и Opera 12.0, которые хотя и понимают CSS3 Media Queries, но не поддерживают matchMedia.

          matchMedia_1

          Проблемму совместимости помогают решить различные polyfill'ы, о которых мы уже говорили в предыдущей статье. Рекомендую обрать внимание на media-match.

          Итак, приступим. Прежде всего, определимся с первоисточником. Для нас - это, конечно же, спецификация W3C. Если что-то из ниже описанного будет расходится со спецификацией или устареет - смело кидайте камнями (лучше, конечно, пишите в комментариях).

          Рассмотрим простой пример

          Допустим, нам необходимо добавлять к некоторому диву класс "some-class" лишь в том случае, когда ширина экрана браузера больше или равна 768 пикс. Делается это очень просто:

          [js]

          if (window.matchMedia("screen and (min-width: 768px)").matches) {

          div.addClass("some-class");

          } else {

          // ширина экрана меньше 768 пикселей

          }

          [/js]

          Метод window.matchMedia() принимает в качестве аргумента строку - media query (в нашем случае - это "screen and (min-width: 768px)") и возвращает объект MediaQueryList. В свою очередь, объект MediaQueryList имеет 2 атрибута и 2 метода.

          Объект MediaQueryList

          • Media - атрибут readonly (строка).
          • Matches - астрибут readonly (true/false). Определяет, совпал ли заданный media query с текущим размером экрана
          • addListener - метод, "включающий" прослушку на изменение ширины экрана
          • removeListener - метод, "выключающий" прослушку.

          Вот вам скриншот из хрома, для пущей наглядности:

          matchMedia_2

          Начинаете понимать, как всё это работает? Window.matchMedia("screen and (min-width: 768px)") возвращает нам объект MediaQueryList, в котором нас пока интересовал только атрибут matches. Но данный пример сработает у нас только один раз, при инициализации. А что, если пользователь изменит размер экрана? Тут нам на помощь приходит метод addListener.

          Рассмотрим пример более жизненный

          [js]

          function setup_for_width(mql) {

          if (mql.matches) {

          div.addClass("some-class");

          } else {

          div.removeClass("some-class");

          }

          }

          var mql = window.matchMedia("screen and (min-width: 768px)");

          mql.addListener(setup_for_width); // Добавим прослушку на смену результата

          setup_for_width(mql); // Вызовем нашу функцию

          [/js]

          Прежде всего мы объявляем функцию setup_for_width(), в которую будем передавать объект MediaQueryList (mql). Функция очень проста. Если mql.matches = true, то добавляем класс "some-class" к диву. В противном случае, удаляем этот класс.

          Далее, объявляем переменную mql, в которую записываем созданный объект MediaQueryList.

          После чего "включаем" прослушку addListener на изменение объекта mql. При каждом его изменении будет вызываться функция setup_for_width(), а значит удаляться/добавляться класс "some-class", чего мы, в конечном итоге, и добивались.

          В заключение, вызовем нашу функцию setup_for_width(mql), чтобы она сработала в момент первой загрузки страницы (до первого изменения media query).

          Задача выполнена! Вы можете смело использовать данный шаблон на своих проектах, главное не забудьте о поддержке более ранних версий браузеров. Кстати, о том, как правильно подключать polyfill (для тех, кто ещё не умеет пользоваться modernizr), я говорил в предыдущем уроке :) Возникнут вопросы - пишите!

          Поделиться

          Не сиди

          без дела

          учись

          онлайн!

          Содержание

          • Все записи блога
            • Трудоустройство
              • Истории выпускников LoftSchool
              • Полезные советы
            • Полезные ссылки
              • Книги
              • Инструменты
            • Новости школы
              • Команда LoftSchool
              • Информация о курсах
            • Статьи
              • Архив материалов
                • DevNews
                • DevShow
                • Loftnews
                • Loftschool
                • Loftvlog
                • Интервью
                • Видеоуроки
              • © 2012 - 2023 LOFT

                Школа онлайн образования

              • © 2012 - 2023 LOFT

                Школа онлайн образования

                • +7 (800) 600 09 54
                • +7 (812) 339 22 01
                • [email protected]
              • Полезная рассылка

                Подпишись, чтобы быть в курсе наших новостей, акций и скидок.

              • Полезное
                • Карта курсов
                • B2B
                • Работодателям
                • Партнерская программа
                • Вакансии
                • Стать автором
                • Подарочные сертификаты
                • Вебинары
                • Блог
                • FAQ
              • Информация
                • О нас
                • Отзывы
                • Сведения об образовательной организации
                • Правовая информация
                • Способы оплаты
                • Контакты
                Безопасная передача данных