不用擔(dān)心，項目已經(jīng)配置好了 rem 適配, 下面僅做介紹：
Vant 中的樣式默認(rèn)使用px作為單位，如果需要使用rem單位，推薦使用以下兩個工具:
- postcss-pxtorem 是一款
postcss插件，用于將單位轉(zhuǎn)化為rem - lib-flexible 用于設(shè)置
rem基準(zhǔn)值
PostCSS 配置
下面提供了一份基本的 postcss 配置，可以在此配置的基礎(chǔ)上根據(jù)項目需求進(jìn)行修改
// https://github.com/michael-ciniawsky/postcss-load-config module.exports = { plugins: { autoprefixer: { overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8'] }, 'postcss-pxtorem': { rootValue: 37.5, propList: ['*'] } } }
更多詳細(xì)信息： vant
新手必看，老鳥跳過
很多小伙伴會問我，適配的問題,因為我們使用的是 Vant UI，所以必須根據(jù) Vant UI 375 的設(shè)計規(guī)范走，一般我們的設(shè)計會將 UI 圖上傳到藍(lán)湖，我們就可以需要的尺寸了。下面就大搞普及一下 rem。
我們知道 1rem 等于html 根元素設(shè)定的 font-size 的 px 值。Vant UI 設(shè)置 rootValue: 37.5,你可以看到在 iPhone 6 下看到 （1rem 等于 37.5px）：
<html data-dpr="1" style="font-size: 37.5px;"></html>切換不同的機型，根元素可能會有不同的font-size。當(dāng)你寫 css px 樣式時，會被程序換算成 rem 達(dá)到適配。
因為我們用了 Vant 的組件，需要按照 rootValue: 37.5 來寫樣式。
舉個例子：設(shè)計給了你一張 750px * 1334px 圖片，在 iPhone6 上鋪滿屏幕,其他機型適配。
- 當(dāng)
rootValue: 70, 樣式width: 750px;height: 1334px;圖片會撐滿 iPhone6 屏幕，這個時候切換其他機型，圖片也會跟著撐滿。 - 當(dāng)
rootValue: 37.5的時候，樣式width: 375px;height: 667px;圖片會撐滿 iPhone6 屏幕。
也就是 iphone 6 下 375px 寬度寫 CSS。其他的你就可以根據(jù)你設(shè)計圖，去寫對應(yīng)的樣式就可以了。
當(dāng)然，想要撐滿屏幕你可以使用 100%，這里只是舉例說明。
<img class="image" src="https://www.sunniejs.cn/static/weapp/logo.png" />
<style>
/* rootValue: 75 */
.image {
width: 750px;
height: 1334px;
}
/* rootValue: 37.5 */
.image {
width: 375px;
height: 667px;
}
</style>
浙公網(wǎng)安備 33010602011771號