conditionally loading content based on CSS breakpoints

gistfile1.txt

/* CSS for setting variable within breakpoint */

@media all and (min-width: 45em) {
    body:after {
        content: 'widescreen';
        display: none;
    }
}



/* JS for fetching variable */

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



/* JS for doing stuff if breakpoint reached */

if (size == 'widescreen') {
    // Load some more content.
}