vue项目移动端适配

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

npm install lib-flexible --save

npm install postcss-px2rem --save

两个插件的区别

flexible会为页面根据屏幕自动添加标签，动态控制initial-scale，maximum-scale，minimum-scale等属性的值。
postcss-px2rem会将px转换为rem，rem单位用于适配不同宽度的屏幕，根据标签的font-size值来计算出结果，1rem=html标签的font-size值。

引入lib-flexible

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

import 'lib-flexible'

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

配置postcss-px2rem

px2rem的配置放在vue-cli3 项目中vue.config.js中（找不到？可能你是一个新构建的项目，需要手动在项目根目录创建vue.config.js）

 1 module.exports = {
 2     css: {
 3         loaderOptions: {
 4           css: {},
 5           postcss: {
 6             plugins: [
 7               require('postcss-px2rem')({
 8                 remUnit: 37.5
 9               })
10             ]
11           }
12         }
13     },
14 }