配置 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策添，所以需要轉(zhuǎn)換成rem，我們使用px2rem這個插件
安裝px2rem webpack的loader鏈接
npm install px2rem-loader --save-dev
配置
結(jié)合 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=多少像素苦丁，結(jié)合 lib-flexible 的方案浸颓，我們將 px2remLoader 的 options.remUnit 設置成設計稿寬度的 1/10，這里我們假設設計稿寬為 750px旺拉。
2：在build》utils》exports.cssLoaders》generateLoaders 方法修改為
var loaders = [cssLoader, px2remLoader]产上。
這樣在程序中使用px為單位會被自動替換成rem
