vue3.0 自適應不同解析度電腦
首先我們需要要安裝一些依賴
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
注：**
上面已經設定了設計圖的大小，這些操作做完之后，設計圖多大你就寫多大就行，已經可以自動轉換了
**
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/256820.html
標籤：其他