vue3.0 自適應(yīng)不同分辨率電腦的操作
更新時間：2021年02月06日 11:46:31 作者：約定の幸福
這篇文章主要介紹了vue3.0 自適應(yīng)不同分辨率電腦的操作,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
首先我們需要要安裝一些依賴
npm i lib-flexible-computer -S //根節(jié)點(diǎn)會根據(jù)頁面視口變化而變化font-size大小 npm i px2rem-loader -D//自動將px轉(zhuǎn)換為rem npm i postcss-px2rem//將代碼中px自動轉(zhuǎn)化成對應(yīng)的rem的一個插件
這里要和大家說的就是lib-flexible-computer這個npm裝的依賴，想必大家為了做pc的適配搜索了很多方法他們大多數(shù)都是安裝的下面這個依賴
npm i lib-flexible -S
安裝這個依賴，做適配的話只能做到屏幕540一下的，pc端使用并不是很好使所以就換成了上面寫那個依賴
廢話不多說
下面進(jìn)入正題
安裝好依賴怎么使用
在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///設(shè)計(jì)圖寬度/10
})
]
}
}
}
};
這樣在不同分辨率電腦生自己代碼就會自動轉(zhuǎn)換成rem
注：**
上面已經(jīng)設(shè)置了設(shè)計(jì)圖的大小，這些操作做完之后，設(shè)計(jì)圖多大你就寫多大就行，已經(jīng)可以自動轉(zhuǎn)換了
**
到此這篇關(guān)于vue3.0 自適應(yīng)不同分辨率電腦的文章就介紹到這了,更多相關(guān)vue3.0 自適應(yīng)分辨率電腦內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue3編寫組件的幾種實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
Element中select多數(shù)據(jù)加載優(yōu)化的實(shí)現(xiàn)
本文主要介紹了Element中select多數(shù)據(jù)加載優(yōu)化的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
Elemenu中el-table中使用el-popover選中關(guān)閉無效解決辦法(最新推薦)
這篇文章主要介紹了Elemenu中el-table中使用el-popover選中關(guān)閉無效解決辦法(最新推薦),因?yàn)樵趀l-table-column里,因?yàn)槭嵌嘈?使用trigger="manual"?時,用v-model="visible"來控制時,控件找不到這個值,才換成trigger="click",需要的朋友可以參考下2024-03-03
本文通過實(shí)例代碼給大家介紹Vue IP地址輸入框?qū)崿F(xiàn),代碼簡單易懂,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-10-10
Vue Render函數(shù)創(chuàng)建DOM節(jié)點(diǎn)代碼實(shí)例
這篇文章主要介紹了Vue Render函數(shù)創(chuàng)建DOM節(jié)點(diǎn)代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
最近在調(diào)研一些在線文檔的實(shí)現(xiàn),包括文檔編輯器、在線思維導(dǎo)圖、在線流程圖等,本文分享在Vue框架下基于metaeditor-mxgraph實(shí)現(xiàn)在線流程圖,感興趣的朋友一起看看吧2024-07-07
vue路由攔截器和請求攔截器知識點(diǎn)總結(jié)
在本篇文章里小編給各位整理的是一篇關(guān)于vue路由攔截器和請求攔截器知識點(diǎn)總結(jié)文章，有興趣的朋友們學(xué)習(xí)下。2019-11-11
這篇文章主要介紹了vue響應(yīng)式原理的的相關(guān)資料，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-06-06
從零開始學(xué)Vue，通過一些例子，讓大家概覽一些基本的概念和特性，理解Vue的基礎(chǔ)知識,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要介紹了Vue+ElementUI啟動vue卡死的問題及解決,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03