vuecli3移动端H5 rem布局

引入两个包：

1、lib-flexible

lib-flexible会自动在为你添加meta name="viewport"的标签
同时会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。
假如设计稿的宽度是375px，此时1rem应该等于37.5px。
假如设计稿的宽度是750px，此时1rem应该等于75px。

2、postcss-px2rem

postcss-px2rem会将你代码中的px转换为rem

使用方法：

1、安装 flexible和 postcss-px2rem（命令行安装）

  npm install lib-flexible --save
  npm install postcss-px2rem --save

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

  import 'lib-flexible'

由于flexible会动态给页面header中添加<meta name='viewport' >标签，所以务必请把目录 public/index.html 中的这个标签删除

3、配置postcss-px2rem

修改vue.config.js（vue-cli3 构建的项目比以前的精简许多，如果没有请在根目录新建

module.exports = {
  css: {
      loaderOptions: {
        css: {},
        postcss: {
            plugins: [
              require('postcss-px2rem')({
                remUnit: 37.5
              })
            ]
        }
      }
    }
 }           

4、重启项目