1. 程式人生 > >自動調節html的font-size配合rem實現等比例縮放

自動調節html的font-size配合rem實現等比例縮放

<script type="text/javascript">
    var __rootrem;
    (function () {
      var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';

      function setFont() {
        var clientWidth = (document.documentElement || document.body.parentNode).clientWidth;
        if (clientWidth > 769) {
          clientWidth = 750;
        }

        // 375尺寸的比例,換算成@1x設計稿後1px=0.01rem
        __rootrem = Math.floor(clientWidth * 100 / 750);
        (document.documentElement || document.body.parentNode).style.fontSize = __rootrem + "px";
      }
      setFont();

      if (!window.addEventListener) return;
      window.addEventListener(resizeEvt, function () {
        setFont();
      });
    })();
  </script>