Статьи

Как использовать медиазапросы в JavaScript с matchMedia

Июль 19, 2018

Эта статья 2011 была обновлена ​​в 2018 году.

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

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

Медиа-запросы в CSS

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

В следующем примере cssbasic.css подается на все устройства. Но, если это экран с горизонтальной шириной 500 пикселей или больше, также отправляется csswide.css: 

<link rel="stylesheet" media="all" href="cssbasic.css" /> <link rel="stylesheet" media="(min-width: 500px)" href="csswide.css" />

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

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

Можно проанализировать размер области просмотра в JavaScript, но это немного грязно:

  • Большинство браузеров поддерживают window.innerWidth и window.innerHeight . (IE до версии 10 в режиме совместимости требует document.body.clientWidth и document.body.clientHeight .)
  • window.onresize
  • Все основные браузеры поддерживают document.documentElement.clientWidth и document.documentElement.clientHeight но это противоречиво. Размер окна или документа будет возвращен в зависимости от браузера и режима.

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

Как писать медиазапросы с помощью кода JavaScript

К счастью, в JavaScript возможно изменение состояния медиазапроса в CSS3. Ключевым API является window.matchMedia . Это передается строка медиа-запроса, идентичная используемой в медиа-запросах CSS: 

 const mq = window.matchMedia( "(min-width: 500px)" );

Свойство match возвращает true или false в зависимости от результата запроса. Например: 

 if (mq.matches) { // window width is at least 500px } else { // window width is less than 500px }

Вы также можете добавить прослушиватель событий, который срабатывает при обнаружении изменения: 

 // media query event handler if (matchMedia) { const mq = window.matchMedia("(min-width: 500px)"); mq.addListener(WidthChange); WidthChange(mq); } // media query change function WidthChange(mq) { if (mq.matches) { // window width is at least 500px } else { // window width is less than 500px } }

Вы также должны вызывать обработчик сразу после определения события. Это обеспечит инициализацию вашего кода во время или после загрузки страницы. Без него WidthChange() никогда не будет вызван, если пользователь не изменит размеры своего браузера.

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

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

43
Share: