浏览器支持一览
1、依赖包引入
yarn add postcss-px-to-viewport-opt postcss-viewport-units cssnano cssnano-preset-advanced --dev
2、更改项目根目录下.postcssrc.js文件配置
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
"autoprefixer": {},
"postcss-px-to-viewport-opt": {
viewportWidth: 750,// 设计稿宽度
viewportHeight: 1334,// 设计稿高度，可以不指定
unitPrecision: 3,// px to vw无法整除时，保留几位小数
viewportUnit: 'vw',// 转换成vw单位
selectorBlackList: ['.ignore', '.hairlines'],// 不转换的类名
minPixelValue: 1,// 小于1px不转换
mediaQuery: false, // 允许媒体查询中转换
exclude: /(\/|\\)(node_modules)(\/|\\)/ // 排除node_modules文件中第三方css文件
},
"postcss-viewport-units":{},
"cssnano": {
preset: "advanced",
autoprefixer: false,// 和cssnext同样具有autoprefixer，保留一个
"postcss-zindex": false
}
}
}
3、添加全局样式消除img被插件的影响
img {
content: normal !important;
}
