字体感觉小了 引入的vant_vant UI框架适配移动端字体

vant UI框架适配移动端显示

​ 做移动端项目时使用了vant框架，但电脑显示字体正常，真机上显示字体特别小，记录实现移动端适配的方法，以便做资料查询。

1、先安装amfe-flexible 用于设置 rem 基准值

npm i -S amfe-flexible

2、在main.js文件中引入lib-flexible

import 'amfe-flexible/index.js'

3、安装postcss-pxtorem postcss 插件，用于将单位转化为 rem

npm install postcss-pxtorem --save-dev

4、在public/index.html加入meta标签

5、在package.json项目配置里设置postcss

"postcss": {

"plugins": {

"autoprefixer": {

"overrideBrowserslist": [

"Android 4.1",

"iOS 7.1",

"Chrome > 31",

"ff > 31",

"ie >= 8"

]

},

"postcss-pxtorem": {

"rootValue": 37.5,

"propList": [

"*"

]

}

}

}

​

​ 根据这个步骤就完成了移动端适配，关键是需要记住css里边只需要写px，会自动转换成rem显示，rootValue设置为37.5，之所以设为37.5，是为了引用像vant这样的第三方UI框架，因为第三方框架没有兼容rem，用的是px单位，将rootValue的值设置为设计图宽度(这里为750px)75的一半，即可以1:1还原vant、mint-ui的组件，否则会样式会有变化，例如按钮会变小。既然设置成了37.5 那么我们必须在写样式时，也将值改为设计图的一半。