enquire responsive stylesheets

by peterbenoit

HTML

<script src="https://rawgithub.com/WickyNilliams/enquire.js/master/dist/enquire.js"></script>
<script src="http://documentcloud.github.io/underscore/underscore-min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/257704/js/media.match.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://dl.dropboxusercontent.com/u/257704/css/default.css">
    <h1></h1>

JavaScript

$(window).on('resize', _.debounce(function(){
    register('resize')
}, 20));

$(function() {
    register('load');
});


function register(evt) {
    enquire
    .register('screen and (max-width:767px)', function() {
        console.log('1');
        $('link').attr('href','https://dl.dropboxusercontent.com/u/257704/css/767px.css');
    })
    .register('screen and (min-width:768px)', function() {
        console.log('2');
        $('link').attr('href','https://dl.dropboxusercontent.com/u/257704/css/768px.css');
    })
    .register('screen and (min-width:992px)', function() {
        console.log('3');
        $('link').attr('href','https://dl.dropboxusercontent.com/u/257704/css/992px.css');
    })
    .register('screen and (min-width:1200px)', function() {
        console.log('4');
        $('link').attr('href','https://dl.dropboxusercontent.com/u/257704/css/1200px.css');
    });    
}

/*
enquire.register("screen and (min-width:40em)", {
    
    match : function() {
        $targets.each(function() {
            var $this = $(this);

            //toggle src and store old img
            $this.data("lowRes", $this.attr("src"));            
            $this.attr("src", $this.data("hiRes"));
        });
    },
    
    unmatch : function() {
        $targets.each(function() {
            var $this = $(this);

            //restore low res src
            $this.attr("src", $this.data("lowRes"));
        });
    }
    
});
*/