寫在前面的話：看了這篇文章，有些東西名詞啥的不懂的，或者有疑問的推薦百度，因?yàn)閷懙奶嗾娴娘@得很啰嗦！
1.移動(dòng)端開發(fā)適配
目前移動(dòng)端適配，在市面上主流適配方案無非就兩種，rem方案和vw方案。這些方案，就可以自動(dòng)適配不同移動(dòng)端屏幕尺寸動(dòng)態(tài)縮放。其實(shí)他的適配，你可以理解為整個(gè)頁面進(jìn)行放大縮小，充滿整個(gè)屏幕。記得要在html設(shè)置如下meta
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- vw方案：把px轉(zhuǎn)換為vw單位，通過設(shè)置viewportWidth:750，750px = 100vw，1vw = 7.5px，這里就跟小程序上的rpx單位類似。
- rem方案：把px轉(zhuǎn)換為rem單位，受到html上的font-size影響。但是我們不能把這個(gè)font-size寫死，它應(yīng)該是基于屏幕大小動(dòng)態(tài)變化，才能適配不同的手機(jī)屏幕。這里可以借助插件幫我們自動(dòng)設(shè)置基準(zhǔn)值和自動(dòng)把px轉(zhuǎn)換為rem單位，在這里有介紹。
-
兩個(gè)方案demo
- mian分支:無vw方案與rem方案，個(gè)人模板
- mobile分支:基于main分支，加入了vw方案與rem方案，可以通過vite.config.ts 修改useVwModel值進(jìn)行切換
- mobile_vant:基于mobile分支，引入了vant框架，進(jìn)行了vant配置
- 演示demo
html {
//假設(shè)375的設(shè)計(jì)稿，設(shè)置了基準(zhǔn)值為20px，那么當(dāng)屏幕為750的時(shí)候，這里的font-size大小應(yīng)該為40px。因?yàn)橄喈?dāng)于整體放大了兩倍
font-size: 20px;//1rem = 20px
}
//375：font-size:20px 750：font-size:40px
<div style="font-size: 1rem;">國破山河在城春草木深</div>
//375:font-size:40px 750:font-size:80px
<div style="font-size: 2rem;">感時(shí)花濺淚恨別鳥驚心</div>
2.vw適配方案（推薦）
只需要安裝插件：postcss-px-to-viewport
- 安裝：npm install postcss-px-to-viewport --save-dev
- vite配置參考如下：
//在vite.config.ts中
// vw方案（無像素差）：px自動(dòng)轉(zhuǎn)換vw
import pxtovw from "postcss-px-to-viewport"
export default defineConfig({
css: {
postcss: {
plugins: [
autoprefixer({
overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
}),
pxtovw({
unitToConvert: 'px', // 要轉(zhuǎn)化的單位
viewportWidth: 750, //100vw=750px，UI設(shè)計(jì)稿的寬度,vant是375?？蓞⒖歼@個(gè)：https://juejin.cn/post/6961737808339795975
unitPrecision: 6, // 轉(zhuǎn)換后的精度，即小數(shù)點(diǎn)位數(shù)
propList: ['*'], // 指定轉(zhuǎn)換的css屬性的單位，*代表全部css屬性的單位都進(jìn)行轉(zhuǎn)換
viewportUnit: 'vw', // 指定需要轉(zhuǎn)換成的視窗單位，默認(rèn)vw
fontViewportUnit: 'vw', // 指定字體需要轉(zhuǎn)換成的視窗單位，默認(rèn)vw
selectorBlackList: ['ignore-'], // 指定不轉(zhuǎn)換為視窗單位的類名，
minPixelValue: 1, // 默認(rèn)值1，小于或等于1px則不進(jìn)行轉(zhuǎn)換
mediaQuery: true, // 是否在媒體查詢的css代碼中也進(jìn)行轉(zhuǎn)換，默認(rèn)false
replace: true, // 是否轉(zhuǎn)換后直接更換屬性值
landscape: false, // 是否處理橫屏情況
// exclude: [/node_modules\/vant/i]
})
],
},
},
})
3.rem適配方案（有0.1px誤差）
需要安裝兩個(gè)插件，1rem=html上的font-size
插件一：lib-flexible —— 用于自動(dòng)設(shè)置 rem 基準(zhǔn)值(也就是html上的font-size)，切記需要再main.js中 import ‘a(chǎn)mfe-flexible’ 后才會(huì)自動(dòng)設(shè)置基準(zhǔn)值
插件二：postcss-pxtorem —— 是一款 postcss 插件，用于將px單位轉(zhuǎn)化為 rem（你可以直接在項(xiàng)目中寫px，它會(huì)自動(dòng)幫你轉(zhuǎn)換為rem單位）
-
安裝插件一：npm i amfe-flexible -D
-
安裝插件二：npm i postcss-pxtorem -D
-
在main.js文件中： import ‘a(chǎn)mfe-flexible’
-
安裝（自動(dòng)管理瀏覽器前綴，非必裝）：npm install autoprefixer --save
-
如果使用了unocss參考配置， 使用下面的unocss插件把自帶的rem轉(zhuǎn)換為px，在通過postcss-pxtorem轉(zhuǎn)換為rem
-
unocss插件(把默認(rèn)的rem單位轉(zhuǎn)換為px，完整配置參考demo)：npm install -D @unocss/preset-rem-to-px
-
vite配置參考如下：
//在vite.config.ts中
// rem方案（部分轉(zhuǎn)換后會(huì)有0.1px的像素差，推薦vw方案）：css自動(dòng)轉(zhuǎn)換為rem，切記需要再main.js中 import 'amfe-flexible' 自動(dòng)設(shè)置基準(zhǔn)值
import postCssPxToRem from 'postcss-pxtorem'
export default defineConfig({
css: {
postcss: {
plugins: [
autoprefixer({
overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
}),
postCssPxToRem({
// 自適應(yīng)，px>rem轉(zhuǎn)換
rootValue:75, // 這里代表的是1rem等于多少rootValue的px。75表示750設(shè)計(jì)稿，37.5表示375設(shè)計(jì)稿
propList: ['*'], // 需要轉(zhuǎn)換的屬性，這里選擇全部都進(jìn)行轉(zhuǎn)換
selectorBlackList: ['norem', 'ignore'], // 過濾掉norem-開頭的class，不進(jìn)行rem轉(zhuǎn)換
mediaQuery: false, // 允許在媒體查詢中轉(zhuǎn)換 px
}),
],
},
}
})
4.原子化插件 unocss 與 tailwindcss
原子化的意思就是，把css的每一個(gè)屬性，定義成一個(gè)class，這樣子的話，我們寫樣式的時(shí)候，可以直接寫，無需再命名class，好維護(hù)，如顏色大小主題等。部分樣式參考：
style="width:100%;height:50px;display:flex;flex-direction:row;background:white;"
// unocss || tailwindcss
class="w-full h-[50px] flex flex-row bg-white"
就我使用一段時(shí)間以來，我最大的感受的就是太爽了，再也不需要 命名class，寫起來很絲滑。但是我認(rèn)為它也有一些弊端，比如：1.前期有個(gè)學(xué)習(xí)記憶的成本（多敲就好）。2.個(gè)人開發(fā)又快又好的，團(tuán)隊(duì)開發(fā)可能要被罵娘（強(qiáng)制別人學(xué)習(xí)使用囧），除非他們也用。3.復(fù)用問題，因?yàn)樗值奶?xì)了，如果一些組合樣式經(jīng)常要用到，不好進(jìn)行復(fù)用，可以通過使用@apply解決。
unocss是基于tailwindcss的。雖然我用的unocss，但是我查文檔用的tailwindcss，寫法跟tailwindcss是一樣的 囧！
這兩個(gè)框架優(yōu)劣百度更詳細(xì)
5.引入移動(dòng)端vant框架
vant框架的設(shè)計(jì)稿是375，如果我們自身的設(shè)計(jì)是375那就無需做額外的配置，但是如果我們是750的設(shè)計(jì)稿，那么rem方案和vw方案需要多做一些配置。這里配置參考兩個(gè)方案demo
6.關(guān)于rpx
rpx是微信小程序上的單位，750rpx=100vw，在設(shè)計(jì)稿750的情況下，1px = 1rpx。在設(shè)計(jì)稿為375的情況下，2px = 1rpx。建議小程序開發(fā)使用750設(shè)計(jì)稿！
- uniapp項(xiàng)目運(yùn)行在瀏覽器上會(huì)把rpx轉(zhuǎn)換為rem，rem適配方案
- uniapp運(yùn)行在小程序上，則不會(huì)進(jìn)行轉(zhuǎn)換。這里超出750，長度溢出了。
7.使用unocss插件后，實(shí)現(xiàn)rpx一樣的書寫方式
移動(dòng)端開發(fā)，我們?cè)谑褂胾niapp框架開發(fā)后，我們可以無任何負(fù)擔(dān)的使用rpx像素，因?yàn)閡niapp在編譯對(duì)應(yīng)平臺(tái)的時(shí)候，會(huì)自動(dòng)幫我們轉(zhuǎn)換對(duì)應(yīng)的像素單位。也就是說，750的設(shè)計(jì)稿，設(shè)計(jì)稿的寬高是多少，我們就可以寫多少的rpx大小。
通過使用vw或者rem適配方案后，我們也可以實(shí)現(xiàn)同樣的效果。我們想設(shè)置長度為500，但是我們?cè)踊牟寮?w-1 默認(rèn)設(shè)置大小為下4px，w-125才為500px，書寫有負(fù)擔(dān)。
我們不得不采用以下方式：
這樣可以實(shí)現(xiàn)同樣的效果，但是問題是繁瑣了，我們能不能直接通過 w-500實(shí)現(xiàn)呢？可以可以的，這些都是可以自己定制的。這里我們生成一個(gè)新的屬性來做區(qū)分，這里定義一個(gè)ww 和 hh 代表的就是 你給我多少，我就是多少px像素。
//uno.config.js
export default defineConfig({
// 預(yù)設(shè)的別名，可以進(jìn)行一些組合使用
shortcuts: [
['center', 'flex items-center justify-center'],
['btn', 'px-2 py-1 rounded inline-block bg-teal-700 text-white cursor-pointer !outline-none hover:bg-teal-800 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
['icon-btn', 'inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-teal-600'],
],
rules:[
[/^ww-(\d+)$/, ([, d]) => ({ width: `$n5n3t3zpx` })],
[/^hh-(\d+)$/, ([, d]) => ({ height: `$n5n3t3zpx` })],
]
})
也可以修改默認(rèn)的，這里列舉部分：
這種方式也不是最優(yōu)解，我們使用官方的一個(gè)插件，上面也有提到，把unocss默認(rèn)的rem單位改為px單位安裝使用文檔。
因?yàn)樗J(rèn)的baseFontSize為16px=1rem，w-1=4px=0.25rem，
我們要想實(shí)現(xiàn)w-1=1px，只需要把baseFontSize改為4px即可。
presetRemToPx({
baseFontSize:4,//默認(rèn)16(1rem=16px)，改為4以后，1rem=1px，方便移動(dòng)端直接使用px單位
}),
通過 http://localhost:5173/__unocss 地址查看編譯的樣式
8.關(guān)于uniapp使用unocss
推薦這個(gè)項(xiàng)目uni-app vue3中使用，它是基于uniapp官方模板。clone這個(gè)項(xiàng)目后，修改package.json
“unocss-preset-weapp”: “^0.53.5”,然后通過pnpm i安裝依賴
這個(gè)可以直接在uniapp運(yùn)行，但是這個(gè)unocss插件提示支持不好，推薦用vscode。所以在vscode使用如下：文章來源：http://www.zghlxwxcb.cn/news/detail-523031.html
- 運(yùn)行在瀏覽器：pnpm run dev:h5
- 運(yùn)行在小程序：pnpm run dev:mp-weixin,但是它只是實(shí)時(shí)監(jiān)聽文件變動(dòng)和生成最新代碼，你需要手動(dòng)啟動(dòng)微信開發(fā)者工具并雙擊打開項(xiàng)目。
打開后，后續(xù)實(shí)時(shí)修改能夠?qū)崟r(shí)更新！
9.演示demo
文章來源地址http://www.zghlxwxcb.cn/news/detail-523031.html
到了這里，關(guān)于vue 移動(dòng)端開發(fā)vw適配方案&rem適配方案 + vant框架 + unocss|tailwindcss的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
