Typically, with something web-based involving any sort of interaction, JavaScript will be involved. When you're developing a responsive project, it's likely you will want to do different things at different viewport sizes. Not just in CSS but also in JavaScript.

Let's suppose we want to invoke a certain JavaScript function when we reach a certain breakpoint in the CSS (remember that 'breakpoint' is the term used to define the point in which a responsive design should change significantly). Let's suppose that breakpoint is 47.5rem (with a 16px root font size that would equate to 760px) and we only want to run the function at that size. The obvious solution would be to simply measure the screen width and invoke the function if the value matched the same value you had decided for your CSS breakpoint.

JavaScript will always return the value of widths as pixels rather than REM values so that's the first complication. However, even if we set the breakpoints in CSS as pixel values, it would still mean two places to update and change those values when we are changing viewport sizes.

Thankfully, there is a better way. I first came across this technique on Jeremy Keith's website: http://adactio.com/journal/5429/

You can find the full code for this at example_10-01. However, the basic idea is that in CSS we insert something that can be easily read and understood by JavaScript.

Consider this in the CSS:

@media (min-width: 20rem) {
    body::after {
        content: "Splus";
        font-size: 0;
    }
}
@media (min-width: 47.5rem) {
    body::after {
        content: "Mplus";
        font-size: 0;
    }
}
@media (min-width: 62.5rem) {
    body::after {
        content: "Lplus";
        font-size: 0;
    }
}

For each breakpoint that we want to communicate to JavaScript, we use the after pseudo element (you could use before too, either is just as good) and set the content of that pseudo element to be the name of our breakpoint. In our preceding example, I am using Splus for small screens and above, Mplus for medium screens and above, and Lplus for large screens and above. You can use whatever name makes sense to you and change the value whenever it makes sense to you (different orientations, different heights, different widths, and so on).

With that CSS set, we can browse the DOM tree and see our ::after pseudo element.

Then in our JavaScript, we can read this value. Firstly, we assign the value to a variable:

var size = window.getComputedStyle(document.body,':after').getPropertyValue('content');

And then once we have it we can do something with it. To prove this concept I have made a simple self-invoking function (self-invoking simply means it is executed as soon as the browser parses it) that alerts a different message on page load depending upon the viewport size:

;(function alertSize() {
    if (size.indexOf("Splus") !=-1) {
        alert('I will run functions for small screens');
    }
    if (size.indexOf("Mplus") !=-1) {
        alert('At medium sizes, a different function could run');
    }
    if (size.indexOf("Lplus") !=-1) {
        alert('Large screen here, different functions if needed');
    }
})();

I'd hope you do something a little more interesting than alert a message in your projects but I think you will find great benefit in approaching the problem this way. You'll never be in danger of your CSS media queries and your width dependent JavaScript functions getting out of sync again.