現(xiàn)在市面上移動(dòng)設(shè)備大小各異毡咏，為了統(tǒng)一的產(chǎn)品形態(tài)和良好的用戶體驗(yàn)，所以在做移動(dòng)H5項(xiàng)目時(shí)球化，需要考慮到移動(dòng)端適配問(wèn)題秽晚。本文就講講Vue+H5項(xiàng)目配置rem移動(dòng)端適配。
Vue+H5適配
一筒愚、項(xiàng)目介紹
- 腳手架CLI：
@vue/cli - Vue版本：
2.6.11 - 移動(dòng)UI組件庫(kù)：
Vant#2.10.14 - CSS預(yù)處理器：
sass
二赴蝇、配置lib-flexible插件
- 下載插件
npm i -D lib-flexible
- 導(dǎo)入：在
src/main.js中使用
import 'lib-flexible'
三、項(xiàng)目配置
- 安裝
postcss-px2rem和postcss-loader插件依賴
npm i -D postcss-px2rem postcss-loader
提示： 如果項(xiàng)目使用了第三方的UI組件庫(kù)（文本以VantUI為例）巢掺，而又不想讓組件庫(kù)的px轉(zhuǎn)為rem句伶，則需要安裝postcss-px2rem-exclude。
npm i -D postcss-px2rem-exclude
- 在
vue.config.js中配置址遇，如果沒(méi)有此文件熄阻，在根目錄新建即可。
// vue.config.js
module.exports = {
// ...
css: {
sourceMap: true,
loaderOptions: {
css: {},
postcss: {
plugins: [
/* rem適配忽略文件目錄 */
require('postcss-px2rem-exclude')({
remUnit: 75, // 參數(shù) 1
exclude: /node_modules|vant/i, // 參數(shù) 2
}),
],
},
},
},
// ...
}
- 使用
Vite腳手架工具構(gòu)建的Vue項(xiàng)目倔约，可以進(jìn)行如下操作：- 在根目錄下新建
postcss.config.js文件 - 配置內(nèi)容如下：
- 在根目錄下新建
// postcss.config.js
module.exports = {
plugins: {
'postcss-px2rem-exclude': {
remUnit: 75,
exclude: /node_modules|vant/i
}
}
};
參數(shù)解釋
-
remUnit：這個(gè)值是一個(gè)計(jì)算單位秃殉，相當(dāng)于1rem = 75px -
exclude：是一個(gè)正則表達(dá)式，忽略rem編譯檢查的目錄，上邊的配置是要把node_modules和vant目錄排除钾军，此文件中的px不需要轉(zhuǎn)rem鳄袍。如果還有其他目錄需要忽略的在此添加就可以。 - remUnit的值是根據(jù)UI設(shè)計(jì)稿的頁(yè)面寬度來(lái)定吏恭，現(xiàn)在通用的尺寸有
750px和375px兩種拗小。如下配置僅供參考：
| 設(shè)計(jì)稿寬度 | 參數(shù)值 | UI尺寸 | CSS樣式 |
|---|---|---|---|
| 375px | 37.5 | 20px | 20px |
| 375px | 75 | 12px | 24px |
| 750px | 75 | 32px | 32px |
注意：
- 此方法對(duì)于
內(nèi)聯(lián)樣式和:style屬性中的動(dòng)態(tài)樣式不生效。 - 對(duì)于
px值比較小的轉(zhuǎn)換不友好樱哼，因?yàn)?code>px轉(zhuǎn)成rem后哀九，值是很小的小數(shù)。例如：1px的border轉(zhuǎn)換后有些機(jī)型直接不展示搅幅，還有使用border-radius繪制的小圓圈或小圓點(diǎn)阅束，轉(zhuǎn)換后估計(jì)是個(gè)橢圓。例：
.border {
border: 1px solid #ddd;
}
.dot {
width: 8px;
height: 8px;
background-color: #00b1fb;
border-radius: 4px;
}
- 解決方法比較簡(jiǎn)單茄唐，對(duì)于比較
小尺寸的可以忽略轉(zhuǎn)換（當(dāng)然也可以使用transform+scale來(lái)實(shí)現(xiàn)）息裸。 - 忽略轉(zhuǎn)換可以加注釋
/* no */，或者使用大寫的PX沪编，具體如下：
/* 忽略寫法 1 */
.border {
border: 1PX solid #ddd;
}
/* 忽略寫法 2 */
.border {
border: 1px solid #ddd; /* no */
}
.dot {
width: 8px; /* no */
height: 8px; /* no */
background-color: #00b1fb;
border-radius: 4px; /* no */
}
《Vue3學(xué)習(xí)與實(shí)戰(zhàn)》系列
- Vue3學(xué)習(xí)與實(shí)戰(zhàn) · 組件通信
- Vue3學(xué)習(xí)與實(shí)戰(zhàn) · 全局掛載使用Axios
- Vue3學(xué)習(xí)與實(shí)戰(zhàn) · 配置使用vue-router路由
- Vue3學(xué)習(xí)與實(shí)戰(zhàn) · Vuex狀態(tài)管理
- vue3 + vite實(shí)現(xiàn)異步組件和路由懶加載
- Vite+Vue3+Vant快速構(gòu)建項(xiàng)目
歡迎訪問(wèn)：天問(wèn)博客
