vue3.0 自適應不同分辨率電腦的操作

Posted on by

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

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 自適應分辨率電腦內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：