<p>The breakpoint (as known to the JS) is <span class="breakpoint">Breakpoint</span>.</p>
<p>This works on IE9+ and all other browsers that support media queries.</p>
<p>The article describing this technique can be found on <a href="https://www.lullabot.com/blog/article/simpler-solution-bring-css-breakpoints-javascript" target="_blank">Lullabot.com</a>.</p>
/**
 * These values will not show up in content, but can be 
 * queried by JavaScript to know which breakpoint is active.
 * Add or remove as many breakpoints as you like.
 */
body:before {
  content: "smartphone";
  display: none; /* Prevent from displaying. */
}
@media (min-width: 550px) {
  body:before {
    content: "smartphone_wide";
  }
}
@media (min-width: 650px) {
  body:before {
    content: "tablet_narrow";
  }
}
@media (min-width: 900px) {
  body:before {
    content: "tablet_wide";
  }
}
@media (min-width: 1100px) {
  body:before {
    content: "desktop";
  }
}
@media (min-width: 1500px) {
  body:before {
    content: "wide";
  }
}
@media (min-width: 2000px) {
  body:before {
    content: "OMG_THATS_SO_HUGE";
  }
}

/* A bit of fluff */
::selection {
  background: #ca322c;
  color: white;
}
body {
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 1.16em;
  color: #4b4b4b;
  margin-top: 50px;
}
p {
  width: 80%;
  max-width: 600px;
  padding-left: 10%;
}
a {
  color: #ca322c;
}
.breakpoint {
  background-color: #ca322c;
  color: white;
  display: inline-block;
  padding: 2px 4px;
}
var breakpoint = {};
breakpoint.refreshValue = function () {
    this.value = window.getComputedStyle(
      document.querySelector('body'), ':before'
    ).getPropertyValue('content').replace(/\"/g, '');
  };
$(window).resize(function () {
  breakpoint.refreshValue();
  $('.breakpoint').html(breakpoint.value);
}).resize();
// Tada!
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js