溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關如何在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
})
]
}
}
}
};關于如何在vue3.0中實現自適應不同分辨率就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
