how to call different jquery actions in responsive design

Question

I\'m at the point to convert my project into an responsive design.

What is the most handy and universal solution do you suggest to implement different jQuery-blocks

Answer 1

I messed around with some libraries and stuff and ended up using this kind of responsive listener. It uses CSS media queries for breakpoints and UnderscoreJS for a throttler. The advantage I see is that the breakpoints are all defined in CSS instead of fragmented around various scripts.

Example CSS @media breakpoints using :after on the body:

body:after {
    content: 'widescreen';
    display: none;
}
@media screen and (max-width: 1024px){
    body:after {
        content: "extra-large";
    }
}
@media screen and (max-width: 768px){
    body:after {
        content: "large";
    }
}
@media screen and (max-width: 640px){
    body:after {
        content: "medium";
    }
}
@media screen and (max-width: 480px){
    body:after {
        content: "small";
    }
}
@media screen and (max-width: 320px){
    body:after {
        content: "tiny";
    }
}

Example listener script waiting to fire based on content of body:after. As you can see it's defined as 2 ranges in this example for show/hide/move/create widgets based on device generality:

http://jsfiddle.net/Dhaupin/nw7qbdzx/ - Just resize the output pane in jsfiddle to test it out.

EDIT: Apparently browsers render the :after contents via window.getComputedStyle(document.body,':after').content differently and insert either single or double quotes. Added a replace to scrub them out.