lib-flexible + postcss-pxtorem
1、安装
npm i lib-flexible
npm i postcss-pxtorem
2、在main.js引入
// 移动端适配
import 'lib-flexible/flexible.js'
3、在src下创建postcss.config.js文件,例:
// module.exports = {
// plugins: [
// require('postcss-pxtorem')({
// rootValue:75,//代表1rem = 75px 比如页面宽750px,最终页面会换算成 10rem
// propList: ['*'],
// exclude: /node_modules/i //这里表示不处理node_modules文件夹下的内容
// })
// ]
// }
module.exports = {
plugins: {
autoprefixer: {
overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
},
'postcss-pxtorem': {
rootValue: 50,
propList: ['*'],
exclude: /node_modules/i //这里表示不处理node_modules文件夹下的内容
//selectorBlackList: ['van-']
}
}
}
4、最终H5打开效果,明显看到等比例缩小了,再根据自己的项目做调整~O(∩_∩)O~