Rem实现自适应布局

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

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

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

3、再在main.js 文件import './utils/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);