responsifier.js

(function($){
    var Responsifier = {
        grid: [900, 768, 660, 560, 460, 360],
        update: function() {
            $('html').add('.responsive').each(function(){
                var $el = $(this);
                var w = $el.width();
                _.each(Responsifier.grid, function(v){
                    if (w < v)
                        $el.addClass("responsive-" + v);
                    else
                        $el.removeClass("responsive-" + v);
                });
            });
        }
    };
    $([window, document]).on('ready resize load responsive', _.debounce(Responsifier.update, 10));
})(jQuery);

Above is a small gist to do make media query alike stuff possible on elements with a certain size. Use it by including this on your page and then annotate every element where you need sizing with the class responsive. In your css you can then use the generated classes.

Code has not been optimized whatsoever and uses jquery and underscore.js. Could easily be changed to remove these dependences of course...