關(guān)于lib-flexible
1. 解讀
lib-flexible會(huì)自動(dòng)在html的head中添加一個(gè)meta name="viewport"的標(biāo)簽溶褪，同時(shí)會(huì)自動(dòng)設(shè)置html的font-size為屏幕寬度除以10荣恐，也就是1rem等于html根節(jié)點(diǎn)的font-size套媚。假如設(shè)計(jì)稿的寬度是750px敦腔，此時(shí)1rem應(yīng)該等于75px史简。假如量的某個(gè)元素的寬度是150px城豁，那么在css里面定義這個(gè)元素的寬度就是 width: 2rem逸吵。但是當(dāng)分辨率大于某個(gè)特定值時(shí)宛乃，它便不再生效。
2. 移動(dòng)端適配步驟
一般而言洒忧，lib-flexible并不獨(dú)立出現(xiàn)蝴韭，而是搭配px2rem-loader一起做適配方案，目的是自動(dòng)將css中的px轉(zhuǎn)換成rem熙侍。
以下為它在vue中的使用：
2.1 安裝 lib-flexible
npm install lib-flexible --save-dev
2.2 引入 lib-flexible
在 main.js中引入lib-flexible
// px2rem 自適應(yīng)
import 'lib-flexible'
2.3 安裝 px2rem-loader
npm install px2rem-loader --save-dev
2.4 配置 px2rem-loader
分兩種情況：
vue-cli 2.x
vue-cli 3.x
2.4.1 第1種
如果是2.x版本
在
build/utils.js中榄鉴，找到exports.cssLoaders，作出如下修改：
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUint: 75 // 以設(shè)計(jì)稿750為例蛉抓， 750 / 10 = 75
}
}
繼續(xù)找到
generateLoaders中的loaders配置庆尘，作出如下配置：
// 注釋掉這一行
// const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
// 修改為
const loaders = [cssLoader, px2remLoader]
if (options.usePostCSS) {
loaders.push(postcssLoader)
}
重新
npm run dev，完成巷送。
2.4.1 第2種
如果是3.x版本驶忌，由于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
}),
]
}
}
},
};
然后，重新npm run dev飞蹂，完成几苍。
3. 大屏
以1920 x 1080設(shè)計(jì)稿為例
3.1 找到源碼
打開./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;
}
3.2 修改源碼
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
if (width / dpr < 1080) {
width = 1080 * dpr;
} else if (width / dpr > 1920) {
width = 1920 * dpr;
}
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
