<p>
  Change the width of the window through the following breakpoints:
</p>  

<pre><code>
:root {
  --breakpoint-xs-value: (max-width: 479px);
  --breakpoint-sm-value: (min-width: 480px) and (max-width: 639px);
  --breakpoint-md-value: (min-width: 640px);
}  
</code></pre>

<p>
  They are set using CSS variables.<br>
  Heading below will show current breakpoint:
</p>

<h1>Current breakpoint: <em id="breakpoint">xs</em></h1>

:root {
  --breakpoint-name: xs;
  --breakpoint-xs-value: (max-width: 479px);
  --breakpoint-sm-value: (min-width: 480px) and (max-width: 639px);
  --breakpoint-md-value: (min-width: 640px);
}

@media (min-width: 480px) and (max-width: 639px) {
  :root {
    --breakpoint-name: sm;
  }  
}

@media (min-width: 640px) {
  :root {
    --breakpoint-name: md;
  }  
}

/* ETC */
html {
  font-family: Georgia;
  padding: 2em;
}
/* Getting variables from CSS */
var 
 mqXS = window.matchMedia( $('html').css('--breakpoint-xs-value').trim() ),
 mqSM = window.matchMedia( $('html').css('--breakpoint-sm-value').trim() ),
 mqMD = window.matchMedia( $('html').css('--breakpoint-md-value').trim() );                   

/* Write current breakpoint to the DOM: */

function WidthChange(mq) {
  if (mq.matches) {
    $("#breakpoint").text( $('html').css('--breakpoint-name').trim() );
  } 
}

/* Listen to breakpoint changes: */

mqXS.addListener(WidthChange);
mqSM.addListener(WidthChange);
mqMD.addListener(WidthChange);

/* Run it after page load: */

WidthChange(mqXS);
WidthChange(mqSM);
WidthChange(mqMD);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

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