Responsive JS. #javascript #responsive

gistfile1.js

window.onresize = function() {
    responsiveLoad();
}

window.onload = function() {
    responsiveLoad();
}

function responsiveLoad() {
    console.log('resized');
    if (matchMedia) {
        var mqs = window.matchMedia("(min-width: 960px)");
        mqs.addListener(WidthChangeToScreen);
        WidthChangeToScreen(mqs);
        
        var mqt = window.matchMedia("(min-width: 768px) and (max-width: 959px)");
        mqt.addListener(WidthChangeToTablet);
        WidthChangeToTablet(mqt);
        
        var mqlm = window.matchMedia("(min-width: 480px) and (max-width: 767px)");
        mqlm.addListener(WidthChangeToLandscapeMobile);
        WidthChangeToLandscapeMobile(mqlm);
        
        var mqpm = window.matchMedia("(max-width: 479px)");
        mqpm.addListener(WidthChangeToPortraitMobile);
        WidthChangeToPortraitMobile(mqpm);
    }
}

function WidthChangeToScreen(mq) {
    if (mq.matches) {
        // screen is >= 960px wide
    }
}

function WidthChangeToTablet(mq) {
    if (mq.matches) {
        // screen is >= 768px && <= 959px wide
    }
}

function WidthChangeToLandscapeMobile(mq) {
    if (mq.matches) {
        // screen is >= 480px && <= 767px wide
    }
}

function WidthChangeToPortraitMobile(mq) {
    if (mq.matches) {
        // screen is <= 479px wide
    }
}