Execute function based on screen size

Question

I need to execute a specific function based on screen size and screen size changes (Responsive)

So lets say I have 3 functions (For Example)

Answer 1

Using javascript, you may get the value of screen size. And from that you can call your custom functions to get what you want.

 //function for screen resize
 function screen_resize() {
        var h = parseInt(window.innerHeight);
        var w = parseInt(window.innerWidth);

        if(w <= 500) {
            //max-width 500px
            // actions here...
            red();
        } else if(w > 500 && w <=850) {
            //max-width 850px
            // actions here...
            orange();
        } else {
            // 850px and beyond
            // actions here...
            green();
        }

    }

I used window.innerHeight/innerWidth to get the height/width of screen without/disregarding the scrollbars.

    // if window resize call responsive function
    $(window).resize(function(e) {
        screen_resize();
    });

and on resize just call the function and also auto call the function on page.ready state.

    // auto fire the responsive function so that when the user
    // visits your website in a mall resolution it will adjust
    // to specific/suitable function you want
    $(document).ready(function(e) {
        screen_resize();
    });

Try to check the output here: OUTPUT :)

hope this helps..