Linking CSS breakpoints to JavaScript

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...