flexible可視化大屏適配方案

一、lib-flexible是什么？

lib-flexible會自動在html的head中添加一個 meta name="viewport"的標簽，
同時會自動設置html的font-size為屏幕寬度除以10，也就是1rem等於html根節點的font-size。
假如設計稿的寬度是750px，此時1rem應該等於75px。
假如某個元素的寬度是150px，那么在css里面定義這個元素的寬度就是 width: 2rem。
但是當分辨率大於某個特定值時，它便不再生效。
dpr=物理像素 / 設備獨立像素

1、移動端適配：

lib-flexible並不獨立出現，而是搭配 px2rem-loader一起做適配方案，目的是自動將css中的px轉換成rem。以下為它在vue中的使用。

01、安裝 lib-flexible

npm install lib-flexible --save-dev

02、引入 lib-flexible

在 main.js中引入lib-flexible

import 'lib-flexible'

03、安裝 px2rem-loader

npm install px2rem-loader --save-dev

04配置 px2rem-loader

分兩種情況：

• vue-cli 2.x
• vue-cli 3.x

　　　　0.1、vue-cli 2.x版中在build/utils.js中，找到exports.cssLoaders，作出如下修改：　　　

const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
        remUint: 75 // 以設計稿750為例， 750 / 10 = 75
    }
}　　

　　　　0.1.1、繼續找到generateLoaders中的loaders配置，作出如下配置：　　

// 注釋掉這一行
// const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
// 修改為
const loaders = [cssLoader, px2remLoader]
 
if (options.usePostCSS) {
  loaders.push(postcssLoader)
}

　　　　0.2、3.x版本。由於3.x版本需要自己配置，在項目根目錄新建文件vue.config.js，然后如下配置：

module.exports = {
    css: {
        loaderOptions: {
            css: {},
            postcss: {
                plugins: [
                    require('postcss-px2rem')({
                        // 以設計稿750為例， 750 / 10 = 75
                        remUnit: 75
                    }),
                ]
            }
        }
    },
};

配置好，重新啟動

npm/yarn run dev/serve

2、PC端/大屏適配：

按照移動端配置可能會有問題喲!!!

例如我們屏幕尺寸要做以3840 x 2160為設計稿的適配，那么我們的remUnit的值則改為384。然后呢？重啟項目，發現……咦？布局全部亂掉！經過排查，自己的代碼基本上不會導致該問題的出現，那么只能是源碼在作怪了。重點來了。

找到源碼打開./node_modules/lib-flexible/flexible.js，找到如下片段源碼：

 

在flexible.js文件下找到refreshRem()方法：

function refreshRem(){
        let width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            width = 540* dpr; //width = width*dpr
        }
        let rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }
從此段源碼中我們不難看出，當屏幕寬度除以dpr（dpr是一個倍數，此處一般為1）大於540這個特定值的時候，那么就不再進行適配了。那么我們如何解決這個問題呢？

修改源碼:

在上述源碼中，進行修改。例如我要適配的大屏幕尺寸是基於3840的設計稿，而要求最小范圍是1980，最大為5760，那么我們要修改的則變為
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;
}
重啟就好

切記在每次初始化 npm i 時，以上配置都要重新配置切記！切記！切記！

案例 http://8.135.114.187/sandaoh5/sandao/index.html#/

 

還需要將px自動轉化為rem   

npm i postcss-plugin-px2rem --save -dev

引入 postcss-plugin-px2rem

然后在vue-config.js中的loaderOptions配置如下

postcss: {
                plugins: [
                    require('postcss-plugin-px2rem')({
                        rootValue: 192, //換算基數， 默認100  ，這樣的話把根標簽的字體規定為1rem為50px,這樣就可以從設計稿上量出多少個px直接在代碼中寫多上px了。
                        // unitPrecision: 5, //允許REM單位增長到的十進制數字。
                        //propWhiteList: [],  //默認值是一個空數組，這意味着禁用白名單並啟用所有屬性。
                        // propBlackList: [], //黑名單
                        exclude: /(node_module)/, //默認false，可以（reg）利用正則表達式排除某些文件夾的方法，例如/(node_module)\/如果想把前端UI框架內的px也轉換成rem，請把此屬性設為默認值
                        // selectorBlackList: [], //要忽略並保留為px的選擇器
                        // ignoreIdentifier: false,  //（boolean/string）忽略單個屬性的方法，啟用ignoreidentifier后，replace將自動設置為true。
                        // replace: true, // （布爾值）替換包含REM的規則，而不是添加回退。
                        mediaQuery: false, //（布爾值）允許在媒體查詢中轉換px。
                        minPixelValue: 3 //設置要替換的最小像素值(3px會被轉rem)。 默認 0
                    }),
                ]
            }