关注互联网应用及运维技术的个人博客

webapp移动端适配配置【rem】

rem移动端适配:

   <script>
      !(function (win, doc) {
        function setFontSize() {
          var baseFontSize = 100;
          var baseWidth = 320;
          var clientWidth = document.documentElement.clientWidth || window.innerWidth;
          var innerWidth = Math.max(Math.min(clientWidth, 480), 320);
          var rem = 100;
          if (innerWidth > 362 && innerWidth <= 375) {
            rem = Math.floor(innerWidth / baseWidth * baseFontSize * 0.9);
          }
          if (innerWidth > 375) {
            rem = Math.floor(innerWidth / baseWidth * baseFontSize * 0.84);
          }
          window.__baseREM = rem;
          document.querySelector('html').style.fontSize = rem + 'px';
        }
        var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';
        var timer = null;
        win.addEventListener(evt, function () {
          clearTimeout(timer);
          timer = setTimeout(setFontSize, 300);
        }, false);
        win.addEventListener("pageshow", function (e) {
          if (e.persisted) {
            clearTimeout(timer);
            timer = setTimeout(setFontSize, 300);
          }
        }, false);
        setFontSize();
      }(window, document));
    </script>
0814201
赞(0)
未经允许不得转载:飞天狒狒 » webapp移动端适配配置【rem】

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址