: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);