Breakpoint script

gistfile1.scss

.block {
  background: black;
  width: 500px;
  height: 100px;
  margin: 0 auto;
  text-align: center;
  &:before {
    margin-top: 25px;
    display: inline-block;
    background: white;
    padding: 10px;
    content: "CSS breakpoint is: 0px to 767px (s)";
  }

  @media only screen and (min-width: 767px) {
    background: blue;
    &:before {
      content: "CSS breakpoint is: 767px to 960px (m)";
    }
  }

  @media only screen and (min-width: 960px) {
    background: green;
    &:before {
      content: "CSS breakpoint is: 960px to 1200px (l)";
    }
  }

  @media only screen and (min-width: 1200px) {
    background: yellow;
    &:before {
      content: "CSS breakpoint is: 1200px + (xl)";
    }
  }
}

gistfile2.js

var breakpoints = {
  s: '(max-width: 767px)',
  m: '(min-width: 767px) and (max-width: 959px)',
  l: '(min-width: 960px) and (max-width: 1200px)',
  xl: '(min-width: 1200px)'
};

// Check if matchMedia API exists
var matchMediaIsPossible = typeof window.matchMedia !== 'undefined';

if (matchMediaIsPossible) {
  Object.keys(breakpoints).forEach(function(breakpoint) {
    var mediaQuerySize = window.matchMedia(breakpoints[breakpoint]);

    // Set the initial breakpoint on page load.
    if (mediaQuerySize.matches) {
      console.log('initial breakpoint is ' + breakpoint)
    }

    // Set updated breakpoint on page resize
    mediaQuerySize.addListener(function() {
      if (mediaQuerySize.matches) {
        console.log('breakpoint updated to ' + breakpoint)
      }
    });
  });
}

gistfile3.html

<!-- 
Sources for this pen:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries
http://philipwalton.com/articles/measuring-your-sites-responsive-breakpoint-usage/

window.matchMedia Supported from:
// IE10
// IE Mobile 10
// Android 3.0
// Safari 5.1
// Safari Mobile 5

There is a way to import breakpoint from CSS using css content property
https://www.lullabot.com/articles/importing-css-breakpoints-into-javascript
-->

<div class="block">
</div>