vue项目使用postcss-pxtorem

1、安装 postcss-pxtorem依赖

npm install postcss-pxtorem

2、src目录下新建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()
}

3、main.js引入rem文件

import './rem'

4、根目录下新建 postcss.config.js文件 内容如下：

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

5、重启服务

• https://www.npmjs.com/package/postcss-pxtorem
• https://github.com/cuth/postcss-pxtorem