首先我們需要要安裝一些依賴
|
1
2
3
|
npm i lib-flexible-computer -S //根節(jié)點(diǎn)會(huì)根據(jù)頁面視口變化而變化font-size大小npm i px2rem-loader -D//自動(dòng)將px轉(zhuǎn)換為remnpm i postcss-px2rem//將代碼中px自動(dòng)轉(zhuǎn)化成對應(yīng)的rem的一個(gè)插件 |
這里要和大家說的就是lib-flexible-computer這個(gè)npm裝的依賴，想必大家為了做pc的適配搜索了很多方法他們大多數(shù)都是安裝的下面這個(gè)依賴
|
1
|
npm i lib-flexible -S |
安裝這個(gè)依賴，做適配的話只能做到屏幕540一下的，pc端使用并不是很好使所以就換成了上面寫那個(gè)依賴
廢話不多說
下面進(jìn)入正題
安裝好依賴怎么使用
在main.js中引入
|
1
|
import "lib-flexible-computer"; |
然后在src同級(jí)下建立一個(gè)vue.config.js文件
并在此文件中加入以下代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
module.exports = { publicPath: "./", outputDir: "dist", lintOnSave: true, css: { loaderOptions: { css: {}, postcss: { plugins: [ require("postcss-px2rem")({ remUnit: 192///設(shè)計(jì)圖寬度/10 }) ] } } }}; |
這樣在不同分辨率電腦生自己代碼就會(huì)自動(dòng)轉(zhuǎn)換成rem
注：**
上面已經(jīng)設(shè)置了設(shè)計(jì)圖的大小，這些操作做完之后，設(shè)計(jì)圖多大你就寫多大就行，已經(jīng)可以自動(dòng)轉(zhuǎn)換了
**
到此這篇關(guān)于vue3.0 自適應(yīng)不同分辨率電腦的文章就介紹到這了,更多相關(guān)vue3.0 自適應(yīng)分辨率電腦內(nèi)容請搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://blog.csdn.net/liulubo520/article/details/113657610
