vue-cli 3.0 搭建vue 2.0中使用postcss-pxtorem适配方案

提示：用vue-cli 3.0搭建的vue 2.0项目中使用prostcss prostcss-pxtorem px转rem 使用vant

---

一、安装

npm install postcss-pxtorem --save

二、创建postcss.config.js

在根目录新建postcss.config.js文件，内容如下

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

三、创建rem.js

创建一个rem.js文件 这个文件是用来做适配（窗口大小变换），命名随意，之后会在main.js里面引入，我项目是放在src/utils文件中，内容如下：

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.js"

到此就完成了