Rem实现自适应布局（手机+web）

rem布局的目的是为了让我们可以用同一份代码,适应不同端（rem：就是css单位）

1、手机端

1.1、项目入口html文件<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">

1.2、在项目util文件夹下创建rem.js文件

1,3、再在main.js 文件import Rem from "./utils/rem"; // rem自适应布局

rem.js代码如下：//以iPhone6尺寸为基准

(function (doc, win) {
  var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      if (clientWidth >= 375) {
        docEl.style.fontSize = '100px';
      } else {
        docEl.style.fontSize = 100 * (clientWidth / 375) + 'px';
      }
    };

  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

2、web端

1.1、在项目util文件夹下创建rem.js文件

1,2、再在main.js 文件import Rem from "./utils/rem";

rem.js代码如下：

(function (doc, win) {
  var docEl = doc.documentElement,
    resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
    setRem = function () {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      docEl.style.fontSize = (clientWidth / 1920) * 16 + "px";
    };

  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, setRem, false);
  doc.addEventListener("DOMContentLoaded", setRem, false);
  win.addEventListener("pageShow", setRem, false);
})(document, window);

标签：web,doc,布局,js,clientWidth,addEventListener,rem,docEl,Rem
来源： https://www.cnblogs.com/zoushuangyu/p/16424282.html