vue實現PC端分辨率適配

lib-flexible + px2rem Loader
lib-flexible 阿里伸縮布局方案
px2rem-loader：px轉rem；

依賴

首先需要安裝 vue-cli 腳手架，這里我安裝的是 cli3。
項目初始化完成后，在項目目錄中安裝 lib-flexible 和 px2rem-loader。

  npm install lib-flexible --save-dev
  npm i postcss-px2rem --save

接着在項目入口文件 main.js 中引入 lib-flexible

import 'lib-flexible/flexible'

配置 postcss-px2rem

在實際開發中得到的設計稿都是 px 單位的，如果手動將 px 轉為 rem ，顯然是一件較為麻煩的事情，因此可以通過一些工具來幫助我們實現。
vue-cli3 因為減少了對於 webpack 的配置，因此有些文件就被隱藏起來了。可以在文件的根目錄下新建一個 vue.config.js 文件，在這個文件里就可以自己增加或修改一些 webpack 配置。
vue-cli2 在config下的index.js里配置。
首先添加一個新的 Loader，vue-cli 的文檔中也寫的非常清楚了，需要在文件中添加以下代碼

module.exports = {
    chainWebpack: config => {
        config.module
            .rule('css')
            .test(/\.css$/)
            .oneOf('vue')
            .resourceQuery(/\?vue/)
            .use('px2rem')
            .loader('px2rem-loader')
            .options({ remUnit: 192 })
            .end()
    }
}

此時重啟服務器就生效以上配置了。但還是存在一些問題，雖然可以轉換為 rem 了，但是計算出來的比例確實 1rem = 54px，這是因為 flexible.js 文件會默認寫死了一個比例，我們需要作出一些修改。

flexible.js文件中，找到refreshRem方法，替換掉；

function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            //  width = 540 * dpr;   就是這里的問題，需要將 540 修改為 width，不將寬度寫死就ok了。
            width = width * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

這時候重新跑以下項目；就會發現1rem=192px了；
以下代碼意思是 設計稿是1920寬度的；量出來100px 傳入conversinon函數中，處理后 就是換算后rem的值；這樣就可以實現自適應pc端頁面了；
必要時可以考慮加入流式布局，彈性盒，媒體查詢結合使用；

<style scoped lang="scss">

@function conversion($num) {
  //換算rem適配pc端
  @return $num/192;
}

.boxTest{
  width:conversion(100)+rem;
  height:conversion(100)+rem;
  border: 1px solid #000;
}

原文鏈接：https://blog.csdn.net/zhangyubababa/article/details/109624275