Применение медиа-запросов в JavaScript

Содержание:

Программисты, занимающиеся сферой сайтостроения, знакомы с темой применения медиа-запросов в CSS. Немногие знают, что подобное применение имеется в JavaScript.

Как показывает практика, запросы в JS намного функциональней аналогов в CSS.

Ниже мы разберем применение медиа-запросов в JavaScript не только с теоретической, но и с практической стороны.

Вы быстро войдете в курс дела и поймете, что запросы для JS намного практичней и лучше.

Что такое медиа-запросы

Они представляют собой главную составляющую адаптивных дизайнов, помогая примерять различные стили к любым ситуациям:

  • основываясь на размере области просмотра;
  • предусматривающие движения;
  • желаемых цветов;
  • необходимых взаимодействий и т. д.

Кроме этих ситуаций, медиа-запросы применимы и к технике, например:

  • телевизорам;
  • проекторам;
  • мониторам и другим бытовым приборам, где есть экраны.

Аналогично вышеперечисленным существуют запросы и для JavaScript. Действия с ними отличаются тем, что с помощью них создаются адаптируемые плагины.

Преимущества медиа-запросов

Они имеют 2 главных преимущества, которые их отличают от запросов в CSS:

  1. Гибкость. Запросы можно вставлять в программный код для того, чтобы они включались во время начала определенного события или выполнения определенных условий.
  2. Удобство. Запросы JSприменяют такой же синтаксис, как и во время использования в CSS.

Если вы только начали применять запросы, то еще успеете оценить эти преимущества.

Применение matchMedia()

Метод применяется для определения соответствия документа строке запроса. Все современные браузеры имеют поддержку работы с этим методом, в их числе Internet Explorer 10.

Применение аналогично медиа-запросам из CSS. Делается передача запроса в matchMedia(), после этого – проверка свойства .matches.

Применение медиа-запросов в JavaScript

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

Применение медиа-запросов в JavaScript

Базовое применение для сравнения условий медиа в JS. Мы делаем условие сравнения (matchMedia()), оно делает возврат объекта (MediaQueryList), проводим его проверку (.matches) и после этого производим какое-то действие, при истинном условии. Подобное работает в CSS.

Это не все. Как пример, если мы меняем размер окна ниже необходимого, то не произойдет никаких изменений. Подобное происходит потому, что .matches хорошо применим для единичных моментальных проверок, но он не может постоянно проверять присутствие всех изменений.

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

Объект MediaQueryList содержит в себе метод addListener(), принимающий функцию обратного вызова (которая представлена событием .onchange), она вызывается во время изменения статуса запроса. Проще говоря, делается запуск дополнительных функций при изменении условий, это позволяет реагировать на обновленные условия.

Применение медиа-запросов в JavaScript

И matchMedia(), и MediaueryList дают одинаковую возможность делать проверку условий медиа и активно откликаться на их обновление.

Во время регистрации прослушивателя addListener() он не срабатывает. Чтобы он заработал, необходимо сделать ручной вызов функции обработчика событий и передачу медиа-запроса в виде аргумента.

Старый способ выполнения

Привязываем прослушиватель resize, выполняющий проверку window.innerWidth или window.innerHeight.

Подобное можно увидеть в реальной среде:

Применение медиа-запросов в JavaScript

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

Применение медиа-запросов в JavaScript

На 157 % больше скриптов.

Можно проще увидеть различие, для этого используем журнал консоли.

Применение медиа-запросов в JavaScript

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

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

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

Вопросы – Ответы

Ответим на несколько популярных вопросов.

Для каких экранов идеально подходят медиа-запросы?

Они универсальны и подходят для абсолютно разных экранов, начиная от смартфонов и заканчивая компьютерными мониторами.

Что такое условная загрузка?

Это мощный инструмент. Он позволяет выставлять необходимые приоритеты для контента и повышать производительность. Человек сам решает, в каком порядке загружать контент. Это же касается и выбора, он может выбирать любой из имеющегося.

Можно ли добавлять поддержку событий в медиа-запросы?

Да. Подобный функционал можно легко добавить в запросы, не производя лишних действий.

Старые версии Internet Explorer вообще не поддерживают медиа-запросы?

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

Заключение

Мы узнали, как применять медиа-запросы в JS, и разобрали практические примеры.

Давайте еще раз вспомним, что мы прошли в статье:

  • узнали, что такое медиа-запросы;
  • узнали о преимуществах медиа-запросов;
  • рассмотрели применение метода matchMedia();
  • разобрались, как делать прослушивание изменений;
  • узнали о старом способе прослушивания изменений;
  • ответили на популярные вопросы.

Теперь вы знаете, как работают медиа-запросы. Используйте информацию в своем дизайне.

Если вы хотите серьезно освоить программирование и стать Java-разработчиком, приглашаем вас на этот курс.

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

У вас появится уникальная возможность изменить свою жизнь в лучшую сторону. Ваше хобби станет еще и заработком.

Немного информации по курсу:

  • длительность курса – 4 месяца;
  • количество занятий в неделю – 5;
  • длительность каждого занятия – 4 часа;
  • практика начинается уже с первой недели обучения.

Занятия будут вести опытные преподаватели, которые сами являются сотрудниками крупных компаний. Они не только научат вас академическому программированию, но и поделятся профессиональными секретами и фишками, которые помогут быстрее и эффективнее писать программный код.

По окончании курса вы получите сертификат, который будет котироваться во всех фирмах как диплом.

Поторопитесь, набор ограничен.

Записывайтесь на курс и начинайте менять свою жизнь уже сегодня.

Присоединяйся к DevEducation — стань востребованным специалистом и построй карьеру в IT!