情景：前端开发经常需要根据一套原型来匹配不同的移动端，原型上标注的尺寸是px，如果需要匹配不同的像素，我们需要自己转换尺寸。通过引用插件可以实现一套像素适应不同的移动端，而开发人员只需要根据原型提供的标注来设置尺寸即可

 1. 安装依赖

npm i -S amfe-flexible postcss-px2rem
// lib-flexible已废弃

2. index.html添加viewport设置

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

3. main.js引入

import "amfe-flexible"; 

4. vue.config.js添加配置(任选一种)

var px2rem = require('postcss-px2rem');

// 第一种
module.exports = {
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: "style-loader!css-loader!postcss-loader"
      }
    ]
  },
  postcss: function() {
    return [px2rem({remUnit: 37.5})];
  }
}

// 第二种
module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          // 设计稿宽度的1/10，根据原型图给出的尺寸标注来。我这里的原型图总宽度是375
          px2rem({ remUnit: 37.5 }),
        ],
      },
    },
  },
}

5. 重新启动

6. 效果

代码：

浏览器：

7. 注意事项

插件会帮助开发人员转换设置的px像素为rem，如果：

不打算转换原始值，例如：1px的border，在样式后添加/*no*/，例：border: solid 1px #e8e8e8; /*no*/

打算强行使用px，例如：14px的font-size，在样式后添加/*px*/，例：font-size: 14px; /*px*/

8. 传送门

amfe-flexible

postcss-px2rem