---

前言

uni-app 相比普通 H5 頁面，在適配多終端屏幕方面做了大量工作，目標是讓同一套代碼在 App、小程序、H5 等多平臺上視覺一致、布局準確、交互無誤。

---

? 一、核心適配方式對比

維度	普通 H5 頁面	uni-app
單位體系	px, rem, %, vw/vh 等	統一使用 rpx（響應像素）
設計稿基準	通常 750px 或 375px，需手動適配	默認設計稿以 750px 寬度為基準
屏幕適配機制	開發者手動設置 viewport 和 media query	編譯時自動轉換 rpx → 實際像素（各端自適應）
多端兼容性	需針對不同終端編寫樣式	各端運行時會自動渲染為適配單位（如 App、小程序自動轉換）
字體縮放問題	需要 JS 控制或媒體查詢	自動處理大字體模式（小程序）和字體縮放（App）兼容性

---

📏 二、rpx 單位：uni-app 的核心適配機制

• rpx = responsive pixel（響應式像素）

• 自動根據屏幕寬度進行縮放：

  • 在 750px 設計稿下，屏幕寬度為 750rpx，自動適配到任意設備
  • 設備寬為 375px（iPhone 6/7/8），則 1rpx = 0.5px

• 編譯時轉換為各平臺的對應單位：

  • 小程序平臺 → 微信原生 rpx
  • H5 → 轉換為 vw
  • App → 轉換為 px + dpr 縮放

📌 你寫一次：width: 375rpx，在所有平臺都能保持相同視覺寬度！

---

🧱 三、默認設計稿適配（750寬）

• 大多數組件、模板、樣式都是以 750px 寬設計稿為基準
• 若你的設計稿是 375px 寬，也可以通過工具將其轉為 750 再開發
• rpx 只關注相對寬度，不必手動設置媒體查詢或 DPR 縮放

---

🔁 四、字體 & 屏幕密度適配

• 小程序字體縮放兼容：rpx 會自動縮放，不需要額外處理
• App 字體縮放兼容：uni-app 已處理系統字體縮放問題
• 不建議使用 px 單位定義字體，否則在高 DPI 設備上易出現大小不一

---

🛠 五、特殊平臺適配（底部安全區、劉海屏）

uni-app 提供了多平臺兼容性處理：

問題	解決方式
iPhone X 底部安全區	使用 safe-area-inset-bottom，或 H5 中使用 padding-bottom: constant(safe-area-inset-bottom)
狀態欄高度	通過 uni.getSystemInfoSync() 獲取 statusBarHeight
劉海屏/圓角屏	App 和小程序平臺會自動適配 padding 區域，建議使用 view 包裹避免遮擋

---

🧪 六、調試建議

• 推薦設計稿基準寬度：750px
• 使用 HBuilderX 或 微信開發者工具 來真實還原 rpx 效果
• 避免寫死 px 布局（否則會在高分屏上過小）

---

🧰 七、總結：uni-app 的屏幕適配優勢

優勢	描述
? rpx 統一單位	一套代碼兼容所有屏幕密度和平臺
? 編譯階段處理	無需手動編寫媒體查詢或動態 JS 控制
? 多端兼容性強	H5、小程序、App 統一視覺表現
? 安全區處理完善	App/iOS/小程序常見異形屏已內建支持

---