在项目中为了屏幕适配，经常会用到rem，postcss-px2rem就是为了让我们直接在将代码中px自动转化成对应的rem的一个插件
如何使用：
1.安装
npm i postcss-px2rem --save-dev
2.设置vue.config.js
css: {
// 启用 CSS modules
modules: false,
// 是否使用css分离插件
extract: true,
// 开启 CSS source maps?
sourceMap: false,
// css预设器配置项
loaderOptions: {
// 导入scss变量
scss: {
// prependData: `@import "@/assets/variable.scss";`
},
postcss: {
plugins: [
//remUnit这个配置项的数值是多少呢？？？ 通常我们是根据设计图来定这个值，原因很简单，便于开发。
//假如设计图给的宽度是750，我们通常就会把remUnit设置为75，这样我们写样式时，可以直接按照设计图标注的宽高来1:1还原开发。
require('postcss-px2rem')({remUnit: 16}), // 换算的基数
]
}
}
},
3.转换的rem是根据html根节点fontSize转换的。要想随窗口自适应，就要动态根节点字体大小
public目录下创建rem.js
// 基准大小
const baseSize = 16
// 设置 rem 函数
function setRem() {
// 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
const scale = document.documentElement.clientWidth / 1920
// 设置页面根节点字体大小
document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.addEventListener('resize', setRem);
main.js中使用
(function() {
var rem = document.createElement("script");
rem.src = "./rem.js";
document.body.appendChild(rem);
})();
