移動端 Web App 自適應佈局主流 5 種方案，各有優劣適用場景。本文系統梳理 **Flexbox、Rem 彈性、流式、響應式、自適應** 五大技術路線原理、兼容性、優缺點，並重點講解 Rem 方案的實戰計算與 JS 動態根字號配置，為技術選型提供決策參考。

五大方案總覽

方案	核心技術	特點	兼容性	適用場景
Flexbox	CSS3 Flexbox	富媒體/複雜排版強大，但早期未普及兼容性極差，幾無項目應用	現代瀏覽器全支持	新項目、複雜組件、內部系統
Rem 彈性佈局	rem 單位（相對 html 根字號）	繞開 em 父級依賴，類 em 功能且更可控，配合 JS 動態計算根字號實現全屏適配	IE9+、主流現代瀏覽器	移動端 Web App 主流選擇
流式佈局	% 百分比寬度 + px 固定高度 + max-width 控制	根據 viewport 與父元素實時調整，適應各種分辨率，代表作網格系統	全瀏覽器支持	傳統響應式網站、內容型頁面
響應式佈局	@media 媒體查詢切換樣式	優秀響應範圍下體驗最佳，但同一設備下實際仍為固定佈局	IE9+、主流現代瀏覽器	多斷點適配、桌面優先改造
自適應佈局	@media + Grid System + 相對單位綜合	綜合上述技術，單一頁面不同設備返回不同样式，**已成優秀頁面佈局標準**	IE9+、主流現代瀏覽器	生產級項目、複雜業務系統

Rem 方案深度實戰指南

1. 原理回顧

rem 相對於根元素 `` 的 `font-size` 計算。瀏覽器默認 16px，1rem = 16px。為便計算，常設 `html {font-size: 62.5%;}` → 1rem = 10px（10÷16×100%）。

html {font-size: 62.5%; /* 1rem = 10px */} 
body {font-size: 1.4rem; /* 14px */} 
h1 {font-size: 2.4rem; /* 24px */}

⚠️ **Chrome 最小字號 12px 限制**：實際項目**不可**設 62.5%，否則小於 12px 計算不準（Chrome 會按 12px 計算）。建議設 `html {font-size: 100px;}` 配合 750 設計稿，1rem = 100px，元素值 = 設計稿 px / 100，或使用 CSS 預處理器自動換算。

2. 針對設計稿計算 Rem（以 640/750 寬設計稿為例）

• 設置基準：`html {font-size: 100px;}`（750 稿）或 `font-size: 50px;`（640 稿，1rem=50px）
• 元素尺寸 = 設計稿 px 值 / 基準值 → rem 值
• 配合 Sass/Less/Stylus mixin 自動換算，維護極簡

3. 針對不同分辨率動態計算根字號（核心 JS 代碼）

(function (doc, win) {
  var docEl = doc.documentElement,
      resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
      recalc = function () {
          var clientWidth = docEl.clientWidth;
          if (!clientWidth) return;
          docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'; // 750 設計稿基準
      };
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

原理：監聽 `resize`/`orientationchange`，實時計算 `clientWidth`，按比例設定 `html font-size`，所有 rem 單位自動縮放適配。

4. 配合 CSS 預處理器最佳實踐

• Sass/Less/Stylus 編寫 `@function px2rem($px) { @return $px / 100 * 1rem; }`
• 寫法：`width: px2rem(320);` → 編譯為 `width: 3.2rem;`
• 統一管理設計稿基準，切換 640/750/1125 只需改一行變量

技術選型建議

1. 新項目/複雜組件：優先 Flexbox + Grid，現代瀏覽器無兼容包袱。
2. 移動端 Web App 兼容舊機型：Rem + 動態根字號 JS 方案最穩健、生態最成熟。
3. 內容型響應式官網：流式佈局 + @media 斷點微調，維護成本低。
4. 大型系統：自適應佈局（綜合上述技術），建立設計系統與組件庫，統一佈局語言。

結語

無銀彈，只有**場景最優解**。理解 5 種方案本質差異，結合項目兼容要求、團隊技術棧、設計交付流程，選擇並深耕一套體系，才是長久之計。Rem 方案憑藉「單一根字號控全局」的優雅特性，仍是移動端 Web App 適配的主流首選。