Javascript: matchMedia, modernizr

Javascript: matchMedia, modernizr.js

/*
 * MATCHMEDIA API
 *   info:
 * http://loftblog.ru/2013/05/22/izuchaem-matchmedia-api-i-object-mediaquerylist/#more-686
 * http://dbaron.org/log/20110422-matchMedia
 * http://dev.w3.org/csswg/cssom-view/#extensions-to-the-window-interface
 *   browser support polyfill:
 * https://github.com/weblinc/media-match
 */

function setup_for_width(mql) {
	if (mql.matches) {
		div.addClass("some-class");
	} else {
		div.removeClass("some-class");
	}
}

var mql = window.matchMedia("screen and (min-width: 768px)"); 
mql.addListener(setup_for_width); // Добавим прослушку на смену результата
setup_for_width(mql); // Вызовём нашу функцию

/* 
 * Как это работает:
 * 1) Прежде всего мы объявляем функцию setup_for_width(), в которую будем передавать объект MediaQueryList (mql). Функция очень проста. 
 * 	  Если mql.matches = true, то добавляем класс "some-class" к диву. В противном случае, удаляем этот класс.
 * 2) Далее, объявляем переменную mql, в которую записываем созданный объект MediaQueryList.
 * 3) После чего “включаем” прослушку addListener на изменение объекта mql. При каждом его изменении будет вызываться функция setup_for_width(), 
 * 	  а значит удаляться/добавляться класс "some-class", чего мы, в конечном итоге, и добивались.
 * 4) В заключение, вызовем нашу функцию setup_for_width(mql), чтобы она сработала в момент первой загрузки страницы (до первого изменения media query).
 */

/*
 * Как подключить polyfill при помощи modernizr
 * index.html
 */

<script src="/js/modernizr.js"></script>
<script>
	Modernizr.load([
    //first test need for polyfill
    {
        test: window.matchMedia,
        nope: "/js/media.match.js"
    },

    //and then load others
    "/js/enquire.js",
    "/js/jquery.min.js",
    "/js/common.js"
	]);
</script>