美文网首页
rem移动端适配

rem移动端适配

作者: 刘予川 | 来源:发表于2018-05-17 22:19 被阅读0次

    在框架入口文件引入就可以了,我这里是按照设计图的750px来适配的

    (function (designWidth, maxWidth) {
        var doc = document,
        win = window;
        var docEl = doc.documentElement;
        var tid;
        var rootItem, rootStyle;
    
        function refreshRem() {
          var width = docEl.getBoundingClientRect().width;
          if (!maxWidth) {
              maxWidth = 540;
          }
          if (width > maxWidth) {
              width = maxWidth;
          }
          //与淘宝做法不同,直接采用简单的rem换算方法1rem=100px
          var rem = width * 100 / designWidth;
          //兼容UC开始
          rootStyle = "html{font-size:" + rem + 'px !important}';
          rootItem = document.getElementById('rootsize') || document.createElement("style");
          if (!document.getElementById('rootsize')) {
              document.getElementsByTagName("head")[0].appendChild(rootItem);
              rootItem.id = 'rootsize';
          }
          if (rootItem.styleSheet) {
              rootItem.styleSheet.disabled || (rootItem.styleSheet.cssText = rootStyle)
          } else {
              try {
                  rootItem.innerHTML = rootStyle
              }
              catch (f) {
                  rootItem.innerText = rootStyle
              }
          }
          //兼容UC结束
          docEl.style.fontSize = rem + "px";
        }
        refreshRem()
    
        win.addEventListener("resize", function () {
          clearTimeout(tid); //防止执行两次
          tid = setTimeout(refreshRem, 300);
        }, false)
    
        win.addEventListener('pageshow', function (e) {
          if (e && e.persisted) { // 浏览器后退的时候重新计算
              clearTimeout(tid);
              tid = setTimeout(refreshRem, 300);
          }
        }, false)
    
        if (doc.readyState === "complete") {
            doc.body.style.fontSize = "16px";
        } else {
          // doc.addEventListener("DOMContentLoaded", function (e) {
          //     doc.body.style.fontSize = "16px";
          // }, false);
      }
    })(750, 750)
    //designWidth:设计稿的实际宽度值,需要根据实际设置
    //maxWidth:制作稿的最大宽度值,需要根据实际设置
    //这段js的最后面有两个参数记得要设置,一个为设计稿实际宽度,一个为制作        稿最大宽度,例如设计稿为750,最大宽度为750,则为(750,750)
    

    相关文章

      网友评论

          本文标题:rem移动端适配

          本文链接:https://www.haomeiwen.com/subject/npoidftx.html