vue flexable pc端適配

利用webpack配置px2rem-loader和lib-flexible來實現px轉化rem
1、安裝
npm install px2rem-loader -D
npm install lib-flexible -S
2.參照官網配置方法

// 增加代碼，px轉rem配置（需要將px2remloader添加進loaders數組中）
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 192, //根據視覺稿，rem爲px的十分之一，1920px 192 rem
// remPrecision: 8//換算的rem保留幾位小數點
}
}

但是，重新啓動項目比例不對，需要修改代碼。
在main.js中引入文件

import './utils/flexible.js'
1
在 node_module
查看flexible代碼，發現

function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
                width = 540 * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
}

需要將代碼修改爲適應PC端的代碼。

function refreshRem(){
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {
width = width * dpr;
}
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}

一般不對1px的邊框進行換算，只需要哎樣式後面添加/no/即可保證不被轉換

.login {
width: 1920px;
height: 200px;
font-size: 32px;
border: 1px solid red;/no/
background : $color-buttonSure
}