如果是做 PC 端的網(wǎng)頁(yè)即舌，無(wú)需做 rem 適配佣盒，但是做 H5 開發(fā)，rem 是需要做一下的顽聂，Vant 官方也為我們提供了方案肥惭，如下圖所示：
image.png
咱們就按照官方為我們提供的方案進(jìn)行適配，安裝它們：
yarn add lib-flexible -S
yarn add postcss-pxtorem -D
//這里 lib-flexible 是網(wǎng)頁(yè)做 html 的 font-size 適配用的紊搪，所以需要安裝到
<br/>//dependencies蜜葱。而 postcss-pxtorem 是在編譯的時(shí)候?qū)?px 單位轉(zhuǎn)
<br/>//換為 rem 單位時(shí)使用，所以安裝到 devDependencies 便可耀石。
安裝好后牵囤，我們需要在 main.js 引入 lib-flexible，新增如下代碼：
import { createApp } from 'vue'
import { Button } from 'vant';
import 'lib-flexible/flexible'
import App from './App.vue'
import router from './router'
import 'vant/lib/index.css'; // 全局引入樣式
import './index.css'
const app = createApp(App) // 創(chuàng)建實(shí)例
app.use(Button) // 注冊(cè)組件
app.use(router)
app.mount('#app')
接著我們需要為 px 單位轉(zhuǎn) rem 單位做配置。
起初我犯了一個(gè)錯(cuò)誤揭鳞，在根目錄聲明 .postcssrc.js 文件炕贵，但是目前 Vite 創(chuàng)建的項(xiàng)目已經(jīng)不支持這種形式的配置文件了，而是需要 postcss.config.js 文件野崇，配置內(nèi)容如下：
// postcss.config.js
// 用 vite 創(chuàng)建項(xiàng)目鲁驶，配置 postcss 需要使用 post.config.js，之前使用的 .postcssrc.js 已經(jīng)被拋棄
// 具體配置可以去 postcss-pxtorem 倉(cāng)庫(kù)看看文檔
module.exports = {
"plugins": {
"postcss-pxtorem": {
rootValue: 37.5, // Vant 官方根字體大小是 37.5
propList: ['*'],
selectorBlackList: ['.norem'] // 過(guò)濾掉.norem-開頭的class舞骆，不進(jìn)行rem轉(zhuǎn)換
}
}
}
給 src/views/Home.vue 文件里的 div 一個(gè)樣式钥弯，檢查一下 rem 適配是否成功：
<template>
<div class="demo">我是十四</div>
<van-button type="primary" size="large">大號(hào)按鈕</van-button>
</template>
<script>
export default {
}
</script>
<style scoped>
.demo {
width: 100px;
height: 100px;
background-color: aquamarine;
}
</style>
image.png
如若是上圖所示，說(shuō)明配置已經(jīng)生效了督禽。
這里還有一個(gè)需要注意的小知識(shí)點(diǎn)：不需要 px 轉(zhuǎn) rem 的情況脆霎，可以使用大寫的 PX 作為單位。
編譯時(shí)不會(huì)將其轉(zhuǎn)化為 rem 單位狈惫，也可以通過(guò) selectorBlackList 屬性聲明的 .norem 前綴的 class 類名睛蛛，同樣也不會(huì)被轉(zhuǎn)化。
