说明:
1.vant中建议使用px作为单位
将来我们得到的移动端的设计稿是以宽度为375px为标准设计的
我们从设计稿中只能得到px,无法直接得到rem
2.直接使用px作用单位没有响应式的效果
3.vant中的解决方案:
从设计稿中测量出具体的长度px
直接使用px作用单位
使用postcss-pxtorem插件,将px转为rem单位
使用lib-flexible插件,设置rem的基准值
步骤1:下载flexible----------------设置基准值(font-size)
npm i -S amfe-flexible
main.js引入
import 'amfe-flexible'
步骤2:下载postcss-pxtorem--------------------将px转换成rem(px to rem)
npm install postcss postcss-pxtorem --save-dev
根路径中创建postcss.config.js,添加相关配置
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 37.5, // 设置基准值
propList: ['*'], // 所有css属性只要带px都转rem
},
},
};