<h1 id="main"></h1>
<em>Resize browser window to see breakpoint changing</em>
body {
  padding: 20px;
  text-align: center;
}
body:before {
  display: none;
  content: "...";
}
/* Smartphones (Portrait and Landscape) ---- */
@media (max-width: 480px) {
  body:before {
    content: "MOBILE";
  }
}
/* Smartphones (Landscape) ----------------- */
@media (min-width: 321px) and (max-width: 768px) {
  body:before {
    content: "MOBILE";
  }
}
/* Tablets (Portrait and Landscape) -------- */
@media (min-width: 769px) and (max-width: 1024px) {
  body:before {
    content: "TABLET";
  }
}
/* Desktops ----------- */
@media (min-width: 1025px) {
  body:before {
    content: "DESKTOP";
  }
}

function getBreakpoint() {
  var style = window.getComputedStyle(document.querySelector("body"), ":before");
  var breakpoint = style.getPropertyValue("content").replace(/\"/g, "");  
  return breakpoint;
}

function showBreakpoint() {
  document.getElementById("main").innerHTML = getBreakpoint();
}

document.addEventListener("DOMContentLoaded", function(event) { 
  showBreakpoint();
});

window.addEventListener("resize", function(event) {
  showBreakpoint();
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.