vue 大屏适配

1. 安装需要的npm包

npm install amfe-flexible -S
npm install postcss-pxtorem -S

postcss-pxtorem会将px转换为rem，rem单位用于适配不同宽度的屏幕，根据html标签的font-size值来计算出结果，1rem=html标签的font-size值

2. 引入 amfe-flexible

// main.js 中加入如下代码
import 'amfe-flexible'

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

3. 配置postcss-px2rem

• vueCLI3配置

// 根目录创建 postcss.config.js
module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-pxtorem': {
      rootValue: 192, // 基数 效果图尺寸/10
      propList: ['*'],
      selectorBlackList: [] // 设置class忽略开头，以.van开头的class会被忽略转化，这里是忽略有赞ui的
    }
  }
}

• vueCLI2配置

// 在根目录中创建 .postcssrc.js
module.exports = {
  plugins: {
    'postcss-import': {},
    'postcss-url': {},
    // to edit target browsers: use "browserslist" field in package.json
    autoprefixer: {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 75, // 基数 效果图尺寸/10
      propList: ['*', '!border*']
    }
  }
}

opList 表示不匹配 要是想匹配边框之类的 可以在里面用 !border* 表示不配备边框，这样不会把边框1px变成1rem

4.使用方法

no代表不编译

.custom-margin-top {
  border: 1px solid black; /*no*/
}