vue中rem的使用

vue中的rem如何做？

首先项目中，新建一个目录config，并且在新建一个js文件rem.js

 在rem.js里面使用闭包

写进如下代码

// 设置基准
const BASE = 15;

(function (doc, win) {
    let docEl = doc.documentElement,
   // orientationchange->手机屏幕转屏事件
       // resize->页面大小改变事件
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',//去windows遍历属性，如果有orientationchange这个属性就用他，没有就用resize
        recall = function () {
            let clientWidth = docEl.clientWidth;//获取到屏幕的宽度
            if (!clientWidth) return;
            docEl.style.fontSize = BASE * (clientWidth / 320) + 'px';
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recall, false);
 // DOMContentLoaded->dom加载完就执行,onload要dom/css/js都加载完才执行
    doc.addEventListener('DOMContentLoaded', recall, false);
})(document, window);

在main.js引入rem

不过存在的问题是，在pad尺寸的屏幕下，通过这个代码转换后的比率会使元素高度过大，超出屏幕，要用媒体查询来重新设置pad屏幕下的各元素height：

@media screen and (min-width:768px){}