首先安装插件 npm install postcss-px-to-viewport --save-dev
在 vue.config.js 文件里面配置一下属性以及代码
css: {
loaderOptions: {
postcss: {
plugins: [
require("postcss-px-to-viewport")({
unitToConvert: "px",//转换哪些尺寸单位
viewportWidth: 1920,//设计图宽度-代表1920px=100vw 也就是100%
unitPrecision: 3,//指定`px`转换为视窗单位值的小数位数
propList: [
"*"
],
viewportUnit: "vw",
fontViewportUnit: "vw",
selectorBlackList: ['#app'], // 指定不需要转换的类
minPixelValue: 1, //小于或等于`1px`时不转换为视窗单位
mediaQuery: false, //是否允许媒体查询中转换px
replace: true,
exclude: /(\/|\\)(node_modules)(\/|\\)/
})
]
}
}
},
使用 echarts 图表时 记得把该事件也加上
window.addEventListener("resize", function() {
myChart.resize();
});