移动端rem自适应

使用插件  

npm install postcss-pxtorem --save

根目录下创建postcss.config.js文件

module.exports = {
    plugins: {
        'postcss-pxtorem': {
            rootValue: 37.5, // 已设计稿宽度375px为例 vant用的是375的设计稿
            propList: ['*'],
        },
    },
};

然后utils中新建rem.js文件

const baseSize = 37.5 //跟postcss.config.js中rootValue的值是一致的
// 设置 rem 函数
function setRem () {
    // 当前页面宽度相对于 375 宽的缩放比例，可根据自己需要修改。  vantUI使用的是375px页面宽，这里使用375px
    const scale = document.documentElement.clientWidth / 375
    // 设置页面根节点字体大小 最高为两倍图 即设计稿为750
    document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
    setRem()
}

再main.js中引入rem.js

import "./utils/rem" //改变窗口大小时重新设置 rem

重新运行，就可以了