For websites using progressive enhancement or responsive techniques it’s often useful to get track of the viewport-width in JavaScript, e.g. for loading images in different resolutions with ajax. While it’s easy in CSS3 to change styles for different desktop resolutions based on media queries, JavaScript just offers approaches like window.clientWidth() to determine the width. Which doesn’t give you nice “breakpoints” of media queries. To couple JavaScript with CSS3 settings Emil Björklund proposed to use the content element of an :after pseudo-element.

http://tech.particulate.me/javascript/2013/10/10/how-to-conveniently-check-for-responsive-breakpoints-in-javascript/