rem移动端适配

2018-05-17  本文已影响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)
上一篇下一篇

猜你喜欢

热点阅读