移动端rem适配

1.假设设计稿是针对iphone6、7、8,宽度750px(物理像素)

2.js代码:

!(function (doc, win) {
  // 拿到html标签的dom元素对象
  var docEle = doc.documentElement,
    evt = "onorientationchange" in window ? "orientationchange" : "resize",
    fn = function () {
      // 拿到当前屏幕的尺寸。
      var width = docEle.clientWidth;
      width = width < 320 ? 320 : width;
      width = width > 640 ? 640 : width;
      width && (docEle.style.fontSize = 100 * (width / 750) + "px");

      setTimeout(function() {
        var width = docEle.clientWidth;
        width = width < 320 ? 320 : width;
        width = width > 640 ? 640 : width;
        width && (docEle.style.fontSize = 100 * (width / 750) + "px");
      }, 300);
    };

  win.addEventListener(evt, fn, false);//监听横屏
  doc.addEventListener("DOMContentLoaded", fn, false);

}(document, window));

3.使用:引入js文件,scss或less文件中长度单位直接使用rem.(长度大小:像素值/100 rem)

例如:设计稿中一个盒子的宽度是200px,则设为2rem.

4.hotcss插件:https://www.npmjs.com/package/hotcss