1. 什么是px2rem

px2rem是一个插件，功能是将px自动转换为rem，帮助开发者减少像素间的相互转换计算过程。

2. 如何安装px2rem

注意：使用环境为node、vue、vue-cli2、webpack、npm、scss，如果缺少相关环境，请自行查阅相关文档进行安装

在项目中安装相关插件

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

在 webpack.base.conf.js中引入

const webpack = require('webpack')
const px2rem = require('postcss-px2rem')
const postcss = require('postcss')

在module中添加如下代码

 plugins: [
    new webpack.LoaderOptionsPlugin({
        // webpack 2.0之后， 此配置不能直接写在自定义配置项中， 必须写在此处
        vue: {
            postcss: [require('postcss-px2rem')({ remUnit: 75, propWhiteList: [] })]
            //因为我是以750px(iphone6)宽度为基准，所以remUnit为75
        },
    })
  ],

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

import 'lib-flexible/flexible.js'

完成以上步骤之后，就可以根据750宽的设计稿进行前端css样式的编码了，我们只需要量取设计稿元素的尺寸，然后把相应的尺寸以px单位写入到css中即可，这里我们不需要将px换算成rem，因为px2rem已经帮我们自动计算好了。如果某一个元素不希望进行自动换算，我们可以在单位的后面添加/*no*/，即可忽略当前换算。例如：