Javascript → enquire.js — работа с медиа-выражениями в javascript

enquire.js — это небольшая (2.2kb) javascript библиотека позволяющая детектить медиа-выражения. Библиотека не зависит от jQuery и других либ. Работает в браузерах с поддержкой matchMedia.

Пример использования — при размере экрана браузера меньше 980px нужно переместить блок из шапки в сайдбар:

enquire.register('screen and (max-width: 980px)', {
  // Вызывается, когда медиа-выражение начинает удовлетворять правилу
  match: function() {
    // Перемещаем блок .myblock из .page-header в конец .page-sidebar
    $('.page-header .myblock').appendTo('.page-sidebar');
  },
  // Вызывается, когда медиа-выражение перестаёт удовлетворять правилу
  // (например изменились размеры браузера)
  unmatch: function() {
    // Возвращаем блок назад в шапку
    $('.page-sidebar .myblock').appendTo('.page-header');
  },
});

Ещё пример — для экрана больше 980px подгружать AJAX-ом новый блок:

enquire.register('screen and (min-width: 980px)', {
  // При опции deferSetup:false (по умолчанию) функция setup() вызывается единожды после
  // регистрации обработчика и не зависит от медиа-выражения (аналог dom ready).
  // При опции deferSetup:true функция вызывается единожды при первом удовлетворении
  // медиа-выражения (аналог единоразового match).
  setup: function() {
    // Подгружаем в сайдбар новый блок
    $.get('/get-myblock', function(html) {
      var $myblock = $('<div class="myblock">' + html + '</div>');
      $myblock.appendTo('.page-sidebar');
    });
  },
  deferSetup: true,
  match: function() {
    // Показываем блок .myblock
    $('.page-sidebar .myblock').show();
  },
  unmatch: function() {
    // Скрываем блок .myblock
    $('.page-sidebar .myblock').hide();
  },
});

Скрытие и показ блока логичнее вынести в css, но для примера пусть будет так.