vue中用postcss-px-to-viewport实现px-vw转化
1.安装postcss-px-to-viewport
yarn add -D postcss-px-to-viewport
2.创建postcss.config.js并配置
module.exports = {
parser: false,
sourceMap: false,
plugins: {
'autoprefixer':true, //低版本安卓css识别不了,开启可以自动转换让低版本识别的css
'cssnano': {},
"postcss-px-to-viewport": {
viewportWidth: 375, //视窗的宽度,对应的是我们设计稿的宽度
viewportHeight: 667, //视窗的高度,对应的是我们设计稿的高度(也可以不配置)
unitPrecision: 5, //指定‘px’转换为视窗单位的小数位数(很多时候无法取整)
viewportUnit: 'vw', //指定需要转换成得视窗单位,建议使用vw
selectBlackList: ['ignore', 'tab-bar'], //指定不需要转换的类
minPixelValue: 1, //小于或等于‘1px’不转换为视窗单位
mediaQuery: false, //允许在媒体查询中转换'px'
exclude: [/TabBar\.vue$/] //这里必须是正则,匹配文件:exclude中存放的元素必须是正则表达式
}
}
}