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标签

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

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 那么我们必须在写样式时，也将值改为设计图的一半。