Vue/cli4.0移动端适配

1、下载amfe-flexible用于适配移动端

npm install --save amfe-flexible

2、下载postcss-px2rem用于将PX转换成rem

npm install postcss-px2rem --save
两个插件都下载好后，package.json文件中会有这两个插件

3、在main.js文件引入amfe-flexible插件

4、在public文件下的index.html文件中加入meta

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
content属性值的解释:
 width:可视区域的宽度，值可为数字或关键词device-width
 height:同width
 intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放
 maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，
 maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。
 user-scalable:是否可对页面进行缩放，no 禁止缩放

5、在vue.config.js文件下配置设计稿尺寸

如果设计稿是375宽，remUnit属性就设置为37.5，目前配置完，页面就已经能自适应了，只需要按照设计稿的尺
寸把样式写上去就好，postcss-px2rem会自动把px转成rem，但是此时还不能修改样式热更新，还需要配置。

6、热更新