根据当前设计页面的基本宽度来进行自适应更改页面像素值
Rem 适配(本文举例vant)
Vant 中的样式默认使用px作为单位,如果需要使用rem单位,推荐使用以下两个工具
- lib-flexible 用于设置rem基准值
- postcss-pxtorem 是一款postcss插件,用于将单位转化为rem
步骤:
(1)安装postcss-pxtorem
$ npm install postcss-pxtorem --save-dev
(2)安装lib-flexible
$ npm i -S amfe-flexible
(3)在main.js中引入lib-flexible
import 'lib-flexible/flexible.js'
(4)在postcss.config.js文件中进行配置
module.exports = {
plugins: {
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 7']
},
'postcss-pxtorem': {
rootValue:37.5,
propList: ['*']
}
}
}