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

Иногда вам нужно запустить некоторый Javascript только в определенном окне просмотра, когда активен медиа-запрос. Вот простой фрагмент, который вы можете использовать для этого…

function checkSize(){
  if ($(“header ul”).css(“display”) == “none”){
    // Code you'd like to be executed when the above is true
  }
}
$(document).ready(function() {
  checkSize();
  $(window).resize(checkSize);
});

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

Например:

@media screen and (max-width: 600px) {
  header ul {
    display: none;
  }
}

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

Мы запускаем функцию при загрузке страницы и всякий раз, когда изменяется размер браузера.

Конечно, для этой работы нам не нужен jQuery, но мне нужно было делать это только в тех проектах, где у меня была включена библиотека.