SOURCE

   /**rem */
    (function () {
        function a() {
            var b = document.documentElement.clientWidth;
            b = b > 750 ? 750 : b;
            var c = b / 750 * 100;
            document.getElementsByTagName("html")[0].style.fontSize = c + "px"
        }
        a();
        window.onresize = a
    })();
    /**rem end */

(function () {
  var zoom = window.devicePixelRatio || window.screen.deviceXDPI / window.screen.logicalXDPI;
  console.log(zoom);
  fontSize();

  window.onresize = fontSize;

  function fontSize () {
    var size;
    var winW = window.innerWidth;
    if (winW <= 1800 && winW > 800) {
      size = Math.round(winW / 18);
    } else if (winW <= 800) {
      size = Math.round(winW / 7.5);
      if (size > 65) {
        size = 65;
      }
    } else {
      // size = 100;
      size = winW / 1920 * 100
    }
    if (zoom == 1.25) {

      document.getElementsByTagName("html")[0].style.fontSize = size / 1.2 + "px"
    } else if (zoom == 1.5) {
      document.getElementsByTagName("html")[0].style.fontSize = size / 1.4 + "px"
    } else {
      document.getElementsByTagName("html")[0].style.fontSize = size + "px"
    }
    /* if (zoom == 1.25) {
      $('html').addClass('zoom125')
    } else if (zoom == 1.5) {
      $('html').addClass('zoom150')
    } */

  }
})();

@media (min-width: 320px){html{font-size: 43.6667px;} }
@media (min-width: 360px){html{font-size: 48px;} }
@media (min-width: 375px){html{font-size: 50px;} }
@media (min-width: 384px){html{font-size: 51.2px;} }
@media (min-width: 414px){html{font-size: 55.2px;} }
@media (min-width: 448px){html{font-size: 59.7333px;} }
@media (min-width: 480px){html{font-size: 48px;} }
@media (min-width: 512px){html{font-size: 68.2667px;} }
@media (min-width: 544px){html{font-size: 72.5333px;} }
@media (min-width: 576px){html{font-size: 76.8px;} }
@media (min-width: 608px){html{font-size: 81.0667px;} }
@media (min-width: 640px){html{font-size: 85.3333px;} }
@media (min-width: 750px){html{font-size: 100px;} }


@media (min-width: 1280px){html{font-size: 66.6667px;} }
@media (min-width: 1360px){html{font-size: 70.8333px;} }
@media (min-width: 1366px){html{font-size: 71.1458px;} }
@media (min-width: 1400px){html{font-size: 72.9167px;} }
@media (min-width: 1440px){html{font-size: 75px;} }
@media (min-width: 1600px){html{font-size: 83.3333px;} }
@media (min-width: 1680px){html{font-size: 87.5px;} }
@media (min-width: 1920px){html{font-size: 100px;} }


@media only screen and (max-width:768px) {
    html {
        font-size: 100px;
    }
}
@media only screen and (max-width:414px) {
    html {
        font-size: 55.2px;
    }
}
@media only screen and (max-width:411px) {
    html {
        font-size: 54.8px;
    }
}
@media only screen and (max-width:375px){
    html{
        font-size: 50px;
    }
}
@media only screen and (max-width:360px) {
    html {
        font-size: 48px;
    }
}
@media only screen and (max-width:320px) {
    html {
        font-size: 42.6667px;
    }
}

/* 1080rem */
@media (min-width: 320px){html{font-size: 29.6296px;} }
@media (min-width: 360px){html{font-size: 33.333;} }
@media (min-width: 375px){html{font-size: 34.7222px;} }
@media (min-width: 384px){html{font-size: 35.555px;} }
@media (min-width: 414px){html{font-size: 38.3333px;} }
@media (min-width: 448px){html{font-size: 41.48px;} }
@media (min-width: 480px){html{font-size: 44.444px;} }
@media (min-width: 512px){html{font-size: 47.4074px;} }
@media (min-width: 544px){html{font-size: 50.37px;} }
@media (min-width: 576px){html{font-size: 53.3333px;} }
@media (min-width: 608px){html{font-size: 56.296px;} }
@media (min-width: 640px){html{font-size: 59.259px;} }
@media (min-width: 750px){html{font-size: 69.44px;} }
@media (min-width: 768px){html{font-size: 71.11px;} }
@media (min-width: 1080px){html{font-size: 100px;} }