rem适配

h5进行rem适配

webpack4 配合postcss-loader 的postcss-px2rem-exclude插件进行转pxrem
webpack5 配合postcss-loader 的postcss-plugin-px2rem插件进行转pxrem

lib-flexible库进行rem适配

页面尺寸不是750px

<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>

rem.js 库

移动端页面自动适配脚本，改造自 amfe/lib-flexible
优点 可以设置设计图宽度
如

代码如下

! function (a) {
    var b = window.document,
        c = b.documentElement,
        d = a ? ~~a.dataset.psd : 750,
        e = 1,
        f = 1 / e,
        g = "orientationchange" in window ? "orientationchange" : "resize",
        h = b.createElement("meta");
    h.name = "viewport", h.content = "width=device-width, user-scalable=no, initial-scale=" + f + ", maximum-scale=" +
        f + ", minimum-scale=" + f, c.firstElementChild.appendChild(h);
    var i = function () {
        var a = c.clientWidth;
        a / e > d && (a = d * e), c.dataset.width = a, c.dataset.persent = 100 * (a / d), c.style.fontSize = 100 *
            (a / d) + "px"
    };
    i(), b.addEventListener && window.addEventListener(g, i, !1)
}(document.querySelector("script[data-psd]"));

下面是手写 rem.js适配代码

用法

<script>
!(function(e, i) {
  var t = e.documentElement,
  n = navigator.userAgent.match(/iphone|ipod|ipad/gi),
  a = n ? Math.min(i.devicePixelRatio, 3) : 1,
  m = "orientationchange" in window ? "orientationchange": "resize";
  t.dataset.dpr = a;
  for (var d, l, c = !1,
  o = e.getElementsByTagName("meta"), r = 0; r < o.length; r++) { (l = o[r]),
      "viewport" == l.name && ((c = !0), (d = l))
  }
  if (c) {
      d.content = "width=device-width,initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0,user-scalable=no"
  } else {
      var o = e.createElement("meta"); (o.name = "viewport"),
      (o.content = "width=device-width,initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0,user-scalable=no"),
      t.firstElementChild.appendChild(o)
  }
  var s = function() {
      var e = t.clientWidth;
      var dw = window['designWidth'] || 750;
      e / a > dw && (e = dw * a),
      (window.remScale = e / dw),
      (t.style.fontSize = 100 * (e / dw) + "px")
  };
  s(),
  e.addEventListener && i.addEventListener(m, s, !1)
})(document, window);
</script>

rem.js 的优势

1. 处理了drp像素适配
2. 处理mate标签内容
3. 抛出 window[‘designWidth’]