安裝 lib-flexible
npm install lib-flexible --save-dev
引入 lib-flexible
在main.js中引入lib-flexible
// px2rem 自適應(yīng)
import 'lib-flexible'
npm install px2rem-loader --save-dev
cnpm install postcss-px2rem --save
由于3.x版本需要自己配置剩燥，在項(xiàng)目根目錄新建文件vue.config.js慢逾，然后如下配置：
module.exports = {
css: {
loaderOptions: {
css: {},
postcss: {
plugins: [
require('postcss-px2rem')({
// 以設(shè)計(jì)稿750為例， 750 / 10 = 75
remUnit: 75
}),
]
}
}
},
};
大屏怎么辦灭红？
??正常情況下侣滩，如果是教程，那么到此就結(jié)束了比伏∈ぢ保可本文中心是如何在大屏中正常使用lib-flexible疆导。
??例如我們屏幕尺寸要做以3840 x 2160為設(shè)計(jì)稿的適配赁项，那么我們的remUnit的值則改為384。然后呢澈段？重啟項(xiàng)目悠菜，發(fā)現(xiàn)……咦？布局全部亂掉败富！經(jīng)過(guò)排查悔醋，自己的代碼基本上不會(huì)導(dǎo)致該問(wèn)題的出現(xiàn)，那么只能是源碼在作怪了兽叮。重點(diǎn)來(lái)了芬骄。
3.1 找到源碼
打開(kāi)./node_modules/lib-flexible/flexible.js，找到如下片段源碼：
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;
}
從此段源碼中我們不難看出鹦聪，當(dāng)屏幕寬度除以dpr（dpr是一個(gè)倍數(shù)账阻，此處一般為1）大于540這個(gè)特定值的時(shí)候，那么就不再進(jìn)行適配了泽本。那么我們?nèi)绾谓鉀Q這個(gè)問(wèn)題呢淘太？
3.2 修改源碼
??在上述源碼中，進(jìn)行修改规丽。例如我要適配的大屏幕尺寸是基于3840的設(shè)計(jì)稿蒲牧，而要求最小范圍是1980，最大為5760赌莺，那么我們要修改的則變?yōu)椋?/p>
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
if (width / dpr < 1980) {
width = 1980 * dpr;
} else if (width / dpr > 5760) {
width = 5760 * dpr;
}
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
