vue移动端项目怎么自适应不同屏幕尺寸 rem.js

一 , 在src - > config文件夹下新建一个rem.js文件, 代码直接贴过去

/*(function(doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);*/

!function (j, i) {
function k() {
var c, d = p.getBoundingClientRect().width;
d > 750 && (d = 750), c = d / 10, p.style.fontSize = c + "px"
}
var o, l, p = j.documentElement,
n = j.querySelector('meta[name="viewport"]'),
m = "width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no";
n ? n.setAttribute("content", m) : (n = j.createElement("meta"), n.setAttribute("name", "viewport"), n.setAttribute(
"content", m),  p.firstElementChild ? p.firstElementChild.appendChild(n) : (l =
j.createElement("div"), l.appendChild(n), j.write(l.innerHTML))), k(), i.addEventListener("resize", function () {
clearTimeout(o), o = setTimeout(k, 300)
}, !1), i.addEventListener("pageshow", function (b) {
b.persisted && (clearTimeout(o), o = setTimeout(k, 300))
}, !1), "complete" === j.readyState ? j.body.style.fontSize = "16px" : j.addEventListener("DOMContentLoaded", function () {
j.body.style.fontSize = "16px"
}, !1)
}(document, window);

二 , main.js中引入这个js文件

import './config/rem'

三 , 设置rem基准值

在扩展中找到 px to rem & rpx  这个插件 , 右键 --> 扩展设置 , 把基准 font-size改成75

( font-size= 设计稿的宽度/10, 设计稿一般都是750px , 所以这里font-size就是75)

四  , 回到.vue文件中写css样式 , 输完px , 右下角会自动弹出换算好的rem值 , 点击即可 , 之后所有样式的px值都用rem表示 , 会自动根据屏幕宽度自适应