/*
Depend of screen size it adds to all element with class "scr", additional class (e.g. "scr-sm").
In a css file you can define representation of elements for different devices.
CSS e.g. 
element.scr-xs {
    ... style for mobile phones
}
*/

function viewport() {
    var e = window, a = 'inner';
    if ( !( 'innerWidth' in window ) ) {
        a = 'client';
        e = document.documentElement || document.body;
    }
    return { width : e[ a+'Width' ], height : e[ a+'Height' ] }
}

function responsiveCss() {
    var wd = viewport().width;
    var cl = "scr-md";
    if (wd <=768) {
        cl = "scr-xs"; // mobile
    } else if (wd >= 768 && wd < 992) {
        cl = "scr-sm"; // tablet
    } else if (wd >= 1200) {
        cl = "scr-lg";
    }
    $(".scr").each(function(){
        $(this).removeClass("scr-xs scr-sm scr-md scr-lg");
        $(this).addClass(cl);
    });
}

$(document).ready(function() {
    responsiveCss();
    window.onresize = function() {
        responsiveCss();
    };

});