npm install -g cnpm --registry=http://registry.npm.taobao.org
cnpm i https://github.com/evrone/postcss-px-to-viewport --save-dev
根目录添加postcss.config.js文件
module.exports = {
plugins: {
autoprefixer: {},
'postcss-px-to-viewport': {
unitToConvert: 'px',
// iphoneX或678
viewportWidth: 375, // UI设计稿的宽度
unitPrecision: 3, // 精度
propList: [
// 指定转换的css属性的单位,*代表全部css属性的单位都进行转换,propList: ["*","!letter-spacing"]
'*'
],
viewportUnit: 'vw', // 指定需要转换成的视窗单位
fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位
selectorBlackList: [], // 指定不转换为视窗单位的类名selectorBlackList: ["wrap"]
minPixelValue: 1, // 默认值1,小于或等于1px则不进行转换
mediaQuery: true, // 是否在媒体查询的css代码中也进行转换,默认false
replace: true, // 是否转换后直接更换属性值
include: [/vant/,/udo_mobile/],
landscape: false // 是否处理横屏情况
}
}
}
踩坑1:使用cnpm安装,npm安装可能会报错;
踩坑2:include: [/vant/,/udo_mobile/],把需要移动自适应的文件夹名称放到include配置项,注意格式
注意使用postcss-px-to-viewport插件尽量避免行内样式,行内样式px没法转换成vw