首先我們需要要安裝一些依賴

npm i lib-flexible-computer -S //根節點會根據頁面視口變化而變化font-size大小
npm i px2rem-loader -D//自動將px轉換為rem
npm i postcss-px2rem//將程式碼中px自動轉化成對應的rem的一個外掛

這裡要和大家說的就是lib-flexible-computer這個npm裝的依賴，想必大家為了做pc的適配搜尋了很多方法他們大多數都是安裝的下面這個依賴

npm i lib-flexible -S

安裝這個依賴，做適配的話只能做到螢幕540一下的，pc端使用並不是很好使所以就換成了上面寫那個依賴

在main.js中引入

import "lib-flexible-computer";

然後在src同級下建立一個vue.config.js檔案
並在此檔案中加入以下程式碼

module.exports = {
 publicPath: "./",outputDir: "dist",lintOnSave: true,css: {
  loaderOptions: {
   css: {},postcss: {
    plugins: [
     require("postcss-px2rem")({
      remUnit: 192///設計圖寬度/10
     })
    ]
   }
  }
 }
};

這樣在不同解析度電腦生自己程式碼就會自動轉換成rem
注：**

上面已經設定了設計圖的大小，這些操作做完之後，設計圖多大你就寫多大就行，已經可以自動轉換了

**

到此這篇關於vue3.0 自適應不同解析度電腦的文章就介紹到這了,更多相關vue3.0 自適應解析度電腦內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！