Vant 中的样式默认使用px作为单位。自己实现适配有点点麻烦,可以使用下面官方推荐的适配方式
- 按照官网要求按需导入组件(此处看我之前的文章或官网)
- 根目录下postcss.config.js
module.exports = {
plugins: {
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 7']
},
'postcss-pxtorem': {
rootValue: 37.5,
//这是基准值,在375px的屏幕变大rem的值会变大,小于这个大小元素的rem值会变小
propList: ['*']
}
}
}
- 下载两个插件
npm install postcss-pxtorem --save-dev
npm i -S amfe-flexible
- main,js中导入,就完成了适配
import 'amfe-flexible'
// 适配后不同屏幕高度不一样