VUE之PC大屏適配

PC屏幕適配主要使用兩個插件：

1、postcss-plugin-px2rem：用於將項目中的px自動轉換成ren；

2、lib-flexible：用於針對不同屏幕進行適配；

lib-flexble：

lib-flexible會自動在html的head中添加一個 meta name="viewport"的標簽，同時會自動設置html的font-size為屏幕寬度除以10，也就是1rem等於html根節點的font-size。假如設計稿的寬度是750px，此時1rem應該等於75px。

使用步驟：

1、安裝 lib-flexible

npm i lib-flexible

2、引入 lib-flexible

在main.js中引入lib-flexible

import 'lib-flexible'

2.1、lib-flexble 默認是用來做移動端適配的，如果做PC適配，我們需要對源碼進行修改

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

從此段源碼中我們不難看出，當屏幕寬度除以dpr（dpr是一個倍數，此處一般為1）大於540這個特定值的時候，那么就不再進行適配了。

2.2、修改源碼

在上述源碼中，進行修改。例如我要適配的大屏幕尺寸是基於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;
}

最小范圍可根據項目來設置，如果最小適配范圍是320，此處就設置為320；如果不設置最大適配范圍，則修改源碼如下：

function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        // 此處的最小范圍可根據實際情況來設置
        if (width / dpr < 320) {
            width = 320 * dpr;
        } else {
            // 不限制最大適配范圍
            width = width * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
}

3、安裝 postcss-plugin-px2rem

npm i postcss-plugin-px2rem

4、配置 postcss-plugin-px2rem

分兩種情況：

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

4.1、vue-cli 2.x 配置

1、在build/utils.js中，找到exports.cssLoaders，作出如下修改：

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

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

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

3、重啟項目 npm run dev，完成，頁面正常寫px即可，UI量出來多少px，頁面就寫多少px。

4.2、vue-cli 3.x 配置

由於3.x版本需要自己配置，在項目根目錄新建文件vue.config.js，然后如下配置：(具體的也可以看官方配置介紹)

module.exports = {
    css: {
    　loaderOptions: {
        postcss: {
          plugins: [
            require('postcss-plugin-px2rem')({
              rootValue: 192, // 以設計稿 1920 為例，1920 / 10 = 192；換算基數，默認100，此處需要根據設計稿的尺寸來設置，始終設置為設計稿的十分之一，這樣頁面就會頁面展示尺寸
              // 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: 0 //設置要替換的最小像素值(3px會被轉rem)。 默認 0
            }),
          ]
        }
      }
    }
}

重啟項目 npm run serve，完成，頁面正常寫px即可，UI量出來多少px，頁面就寫多少px。

重點：

至此，PC適配已經完成，但是有個問題，因為修改的是 ode_modules 里面的文件，如果重新執行 npm i 以后，修改的源碼就會丟失，需要重新修改；

如果是多人開發一個項目，那在某個電腦上修改了，別人電腦上 npm i 安裝完包還是沒有你修改后的源碼；

所以，建議將修改后的 lib-flexble.js 文件復制一份到本地，可以放在 utils 文件夾下，然后將 main.js 的引用方式也修改了  import 'lib-flexible'  修改為 import '@/utils/lib-flexible'

總結一下：

1、將修改后的 lib-flex.js 復制到本地引用

2、修改 main.js 中的引入方式

現在，可以擼起袖子加油干了！！！！！