配置 flexible
安装
npm install lib-flexible --save
引入
// 在项目入口文件 main.js 里 引入 lib-flexible
import 'lib-flexible/flexible.js'
// 在项目根目录的 index.html 中添加如下 meta
<meta name="viewport" content="width=device-width, initial-scale=1.0">
配置 rem
由于设计图中的尺寸是px，所以需要转换成rem，我们使用px2rem这个插件
安装px2rem webpack的loader链接
npm install px2rem-loader --save-dev
配置
结合 lib-flexible 的方案，我们将 options.remUnit 设置成设计稿宽度的 1/10。
1：在 build 》 utils 》 exports.cssLoaders 方法中加入
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 64 // 设计图的1/10
}
}
我们只需在 cssLoader 后再加上一个 px2remLoader 即可，px2rem-loader 的 remUnit 选项意思是 1rem=多少像素，结合 lib-flexible 的方案，我们将 px2remLoader 的 options.remUnit 设置成设计稿宽度的 1/10，这里我们假设设计稿宽为 750px。
2：在build》utils》exports.cssLoaders》generateLoaders 方法修改为
var loaders = [cssLoader, px2remLoader]。
这样在程序中使用px为单位会被自动替换成rem
