Hello，大家好，我是 Sunday。

響應(yīng)式適配，是前端開發(fā)中繞不開的一個(gè)話題。無論是做 H5、后臺(tái)管理系統(tǒng)，還是小程序，只要涉及到多端適配，基本就逃不過這一關(guān)。

但你知道嗎？這個(gè)我們天天接觸的東西，真正被問到時(shí)，很多同學(xué)卻答不上來。真正去寫的時(shí)候，很多同學(xué)寫的反而會(huì)有很大的問題。

比如：直接使用 px 來進(jìn)行布局！

雖然 px 是我們寫樣式時(shí)最熟悉的單位，但它根本不是為響應(yīng)式設(shè)計(jì)而生的。在實(shí)際開發(fā)中，尤其是移動(dòng)端或者多端適配項(xiàng)目中，用 px 經(jīng)常會(huì)掉坑，踩雷踩到懷疑人生。

所以今天，我就帶你徹底搞懂：為什么別再用 px，我們到底該用什么，怎么用才是正解。

一、用 px 帶來的那些坑

很多同學(xué)說：“我用 px 沒出什么問題??？”

是的，在你只面對一張?jiān)O(shè)計(jì)稿、一個(gè)設(shè)備時(shí)，確實(shí)不覺得有什么問題。但當(dāng)頁面 放到不同屏幕尺寸、分辨率、縮放等級(jí) 的設(shè)備上，問題就來了。

圖片

來看個(gè)簡單例子，以上圖的 iPhone 設(shè)備為例：

你寫了一個(gè)寬度為 600px 的容器，設(shè)計(jì)稿上看著剛剛好，但一到 iPhone 上就炸板。放到 4K 屏上，dom 又會(huì)變得非常小，整個(gè)布局也跟著崩了。

這，就是 px 的“絕對性”帶來的坑。

出現(xiàn)這種情況的原因是因?yàn)椋?*px 是固定單位，跟設(shè)備無關(guān)！** 不同設(shè)備的屏幕寬度、DPR（設(shè)備像素比）不同，導(dǎo)致同樣的 px 值，在不同設(shè)備上呈現(xiàn)的效果完全不同。

二、前端適配該怎么做？

說白了，響應(yīng)式的核心就是：

用“相對單位”代替 “固定單位”，讓頁面根據(jù)設(shè)備自適應(yīng)變化。

CSS 給我們準(zhǔn)備了很多單位來解決這個(gè)問題，比如：

• rem、em：相對于字體大小的單位
• vw、vh、vmin、vmax：相對于視口尺寸的單位
• %：相對于父元素的單位

下面咱們一個(gè)個(gè)來看：

1. rem：相對根元素

推薦用于：字體大小、邊距、布局基礎(chǔ)尺寸

1rem = html 根元素的 font-size

通常情況下，我們可以通過 JS 動(dòng)態(tài)設(shè)置 html 的 font-size，實(shí)現(xiàn)整體適配

代碼示例如下：

export const useREM = () => {
  const MAX_FONT_SIZE = 40;

  document.addEventListener("DOMContentLoaded", () => {
    const html = document.querySelector("html");
    let fontSize = window.innerWidth / 10;
    fontSize = Math.min(fontSize, MAX_FONT_SIZE);
    html.style.fontSize = fontSize + "px";
  });
};

這段代碼的意思就是：

頁面寬度除以 10，就是我們整個(gè)頁面的 1rem。

這樣一來，設(shè)計(jì)稿是 375px 寬，那就等于 1rem = 37.5px，其他尺寸都可以用 rem 表示，非常方便。

2. vw / vh：相對視口

推薦用于：寬高布局、大背景圖、卡片容器、輪播圖等

• 1vw = 視口寬度的 1%
• 1vh = 視口高度的 1%

舉例：

.banner {
  width: 100vw;  /* 寬度占滿整個(gè)視口 */
  height: 30vh;  /* 高度為視口高度的 30% */
}

除此之外還有：vmin 和 vmax，適用于橫豎屏動(dòng)態(tài)變化的場景。其中：

• vmin：視口中最小邊的 1%
• vmax：視口中最大邊的 1%

3. %：百分比單位

推薦用于：局部布局、子元素對齊、背景圖居中等

這里需要注意 % 和 vw、vh 不同。 % 是相對父元素的，如果父元素 沒有 設(shè)置寬度，子元素的 % 就沒意義，并且嵌套層級(jí)多時(shí)容易出 復(fù)合放大效應(yīng)。所以，% 雖然靈活，但不適合做全局適配方案的主力單位。

常見寫法：

.box {
  width: 50%;
  padding: 10%;
}

.background {
  background-position: 50% 50%;  /* 居中 */
}

三、如何搭配使用？最佳實(shí)踐來了

那么最后，咱們就看下這些尺寸單位如何搭配進(jìn)行使用。

• 字體大小建議使用 rem ： 通過統(tǒng)一設(shè)置 html 根元素的 font-size，可以確保全站字體隨屏幕寬度自適應(yīng)
• 布局中的寬度和高度建議使用 vw 和 vh ：這兩個(gè)單位是相對于視口大小的百分比，天然具備響應(yīng)式特性，并且適配各類設(shè)備無需額外計(jì)算。
• 間距和邊距同樣推薦使用 rem ：這樣可以確保它們與字體保持一致的縮放比例
• 背景圖位置、元素對齊等局部布局場景中，可以使用 % 單位 ： 它相對于父元素，結(jié)合 position 屬性可以更好的控制元素的對齊與定位。
• 在需要應(yīng)對橫豎屏切換的場景下，可以使用 vmin 或 vmax 單位 ：它們分別代表視口寬度和高度中較小或較大的那個(gè)維度，能夠幫助我們在屏幕方向變化時(shí)仍保持最大視口下的展示效果