postcss-pxtorem+amfe-flexible
- amfe-flexible用来根据页面的窗口变化,设置不同的根元素的rem值
- postcss-pxtorem 把页面的px 转换成rem
- 如果使用vant 组件,不改变vant 的组件,使用以下配置
'postcss-pxtorem': {
rootValue({ file }) {
return file.indexOf('vant') !== -1 ? 37.5 : 75
},
propList: ['*'],
selectorBlackList: ['.el-', '.pc-'],
exclude: /node_modules/i // 不需要转换的文件夹
}
postcss-px-to-viewport
- postcss-px-to-viewport 将px转换成视口单位vw
- autoprefixer 添加css前缀
'postcss-px-to-viewport': {
viewportWidth: 750,
exclude: /node_modules/i
},
autoprefixer: {
overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
}