關(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 找到源碼

打開(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;
}

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;
}

3.3 重啟，完成