vant实现移动端的适配

最近公司做一个移动端的项目，需要做适配，框架本身是提供了vue-cli3.0结合lib-flexible和px2rem实现移动端适配的方案，这里记录下自己做适配的方法。 

介绍 postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem amfe-flexible 用于设置 rem
基准值

1. 安装amfe-flexible

 1. npm i -S amfe-flexible

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

import 'amfe-flexible/index.js'

3. 安装postcss-pxtorem

 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.项目配置postcss
在package.json里面加入这么一段代码

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