PC螢幕適配主要使用兩個外掛：

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

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

lib-flexble：

使用步驟：

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 中的引入方式

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