1.先在搭建号的项目中下载两个插件:
npm i amfe-flexible
npm i postcss-plugin-px2rem
2.在main.js文件夹里面引入amfe-flexible
3.新建一个rem.js文件夹,并导入到main.js:
const baseSize = 16;
// 设置 rem 函数
function setRem() {
// 当前页面宽度相对于 750 宽的缩放比例,可根据自己需要修改。
const scale = document.documentElement.clientWidth / 375;
// 设置页面根节点字体大小
document.documentElement.style.fontSize =
baseSize * Math.min(scale, 2) + "px";
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
setRem();
};
4.新建一个vue.config.vue
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
require("postcss-plugin-px2rem")({
// 换算基数,
rootValue: 192,
//允许REM单位增长到的十进制数字,小数点后保留的位数
unitPrecision: 5,
propList: ["*"],
//默认false,可以(reg)利用正则表达式排除某些文件夹的方法,例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem,请把此属性设为默认值
exclude: /(node_module)/,
//(布尔值)允许在媒体查询中转换px。
mediaQuery: false,
//要忽略并保留为px的选择器,本项目我是用的vant ui框架,所以忽略他
// selectorBlackList: [".van"],
//设置要替换的最小像素值
minPixelValue: 1,
}),
],
},
},
},
}
5.重新运行代码即可自动转化为rem
备注:具体的配置我还没搞懂,先这样写