This JS code checks the width of the browser window, and loads the according stylesheet variant. Stylesheet variants are differentiated by a two-letter suffix (-tn, -xs, -sm, -md, -lg, -xl, -xx). These are standard Bootstrap screen-sizes, with some extensions added from: https://github.com/webprom/bootstrap-layout-xl-xxl/blob/master/bootstrap-xl…

js-cssloader

/*
*   author: arpad1976@gmail.com
*   2015-06-02
*/
var windowWidth = window.innerWidth;
var windowWidth = window.innerWidth;
if (windowWidth >= 1920) {
      styleSheetVariant = '-xx';
  } else if (windowWidth >= 1440 && windowWidth < 1920) {
      styleSheetVariant = '-xl';
  } else if (windowWidth >= 1200 && windowWidth < 1440) {
      styleSheetVariant = '-lg';
  } else if (windowWidth >= 992 && windowWidth < 1200) {
      styleSheetVariant = '-md';
  } else if (windowWidth >= 768 && windowWidth < 992) {
      styleSheetVariant = '-sm';
  } else if (windowWidth >= 480 && windowWidth < 768) {
      styleSheetVariant = '-xs';
  } else if (windowWidth >= 320 && windowWidth < 480) {
      styleSheetVariant = '-tn';
  }
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'cssFolder/cssFilename-'+styleSheetVariant+'.css';
link.media = 'screen';
head.appendChild(link);