user gravatar

Применение Media Queries в JavaScript

Применение Media Queries в JavaScript

Адаптивный дизайн - это тренд в веб дизайне. Если вы один из тех, кто применяет его, то вы используете множество медиа запросов (Media Queries). Медиа запросы - это CSS функция, которая позволяет вам задать определенные стили, если страница удовлетворяет определенным условиям. В этой статье я расскажу как запускать определенный скрипт, в зависимости от значений Media Queries (адаптивный код).

Основы Media Queries

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

@media all and (max-width: 700px) {
    body {
        background: #FF0;
    }
}

Это конечно-же круто, но иногда хочется, чтобы сайт или приложение само было адаптивным (например, запустить определенный скрипт на маленьком экране, а другой на большом). К счастью есть функция window.matchMedia. Эта функция поддерживается во-многих браузерах, кроме IE8 и ниже.

var mq = window.matchMedia([email protected] all and (max-width: 700px)');
if(mq.matches) {
    // ширина браузера больше чем 700px
} else {
    // ширина браузера меньше чем 700px
}

Кроме этого, функция поддерживает события (ивенты):

mq.addListener(function(changed) {
    if(changed.matches) {
      // ширина браузера изменилась на разрешение большее чем 700px
     } else {
    // ширина браузера изменилась на разрешение меньшее чем 700px
    }
});

(На основе этой статьи)