Hello，大家好，我是 Sunday。

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

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

比如：直接使用 px 來進行布局！

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

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

一、用 px 帶來的那些坑

很多同學說：“我用 px 沒出什么問題啊？”

是的，在你只面對一張設計稿、一個設備時，確實不覺得有什么問題。但當頁面 放到不同屏幕尺寸、分辨率、縮放等級 的設備上，問題就來了。

圖片

來看個簡單例子，以上圖的 iphone 設備為例：

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

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

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

二、前端適配該怎么做？

說白了，響應式的核心就是：

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

CSS 給我們準備了很多單位來解決這個問題，比如：

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

下面咱們一個個來看：

1. rem：相對根元素

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

1rem = html 根元素的 font-size

通常情況下，我們可以通過 JS 動態(tài)設置 html 的 font-size，實現(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，就是我們整個頁面的 1rem。

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

2. vw / vh：相對視口

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

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

舉例：

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

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

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

3. %：百分比單位

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

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

常見寫法：

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

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

三、如何搭配使用？最佳實踐來了

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

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