隨著技術的發展，移動設備越來越流行，並且不同設備間屏幕尺寸和屏幕像素的差異，移動端開發麵臨著多解析度適配的問題。 ...
隨著技術的發展，移動設備越來越流行，並且不同設備間屏幕尺寸和屏幕像素的差異，移動端開發麵臨著多解析度適配的問題。
基本概念
響應式開發本質時針對多種屏幕做適配，在實際開發中，通常情況下時針對主流的設備進行適配。在開發前，必須掌握幾個基本概念：
- 物理像素：即屏幕的實際像素點。像素是屏幕設備的最小顯示單元，如 iPhone4 的屏幕解析度是640x960像素，即 iPhone4 的屏幕由橫向640個像素和縱向960個像素排列組成。
- 設備獨立像素：即邏輯像素，用於定義應用的 UI（UI即用戶界面，這裡指的是定義應用界面的各個元素的大小）。蘋果 iPhone4 首次提出了 Retina Display（視網膜屏幕）的概念，在 iPhone4 使用的視網膜屏幕中，把 2x2 個像素當 1 個物理像素使用，即使用 2x2 個像素顯示原來 1 個物理像素顯示的內容，從而讓 UI 顯示更精緻清晰，這 2x2 個像素即使邏輯像素。
- 屏幕像素比（device pixel ratio 簡稱 dpr）：即物理像素與邏輯像素的比值。
常見設備寬高：
| 設備名稱 | 物理像素 | 設備獨立像素 | 屏幕像素比 |
|---|---|---|---|
| iPhone4 | 640x960 | 320x480 | 2 |
| iPhone6，6S，7 | 750x1334 | 375x667 | 2 |
| iPhone6 Plus，6S Plus，7 Plus | 1080x1920 | 414x736 | 3 |
| Galaxy S4, S5 | 1080x1920 | 360x640 | 2 |
| Galaxy Note4 | 1440x2560 | 360x640 | 4 |
| iPad mini 2, 3 | 1536x2048 | 768x1024 | 2 |
視口（Viewport）
視口（Viewport）是指當前可見的電腦圖形區域，在瀏覽器中，是指能用來顯示網頁的區域。視口當前可見的部分叫做可視視口（visual viewport）。整個網頁所占據的區域（包括可視也包括不可視的區域）叫做佈局視口（layout viewport）。當可視視口比佈局視口小時，瀏覽器網頁就會出現橫向滾動條，以支持用戶瀏覽整個網頁的內容。
通常情況下，大多數移動設備的 Viewport（一般指佈局視口）的寬度都是 980 像素，而可視視口（即設備獨立像素）通常都小於 980 像素。為了禁止出現橫向滾動條，不得不設置設備的 Viewport。通過在 Head 元素中使用 Meta 標簽來設置 Viewport 屬性。常用的 Viewport 設置如下：
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
Viewport 屬性：
| 屬性 | 含義 | 取值 |
|---|---|---|
| width | 定義視口的寬度，單位為像素 | 正整數或 device-width（設備的寬度） |
| height | 定義視口的高度，單位為像素 | 正整數或 device-height（設備的高度） |
| initial-scale | 定義初始縮放比例 | 整數或小數 |
| maximum-scale | 定義允許用戶縮放到的最大比例 | 整數或小數 |
| minimum-scale | 定義允許用戶縮放到的最小比例 | 整數或小數 |
| user-scalable | 定義是否允許用戶縮放 | yes或no |
適配方案
對於移動端適配的方案，市面上有很多種。細心觀察會發現，實際上這些適配方案是基於兩種不同的設計思想而產生的。一種是通過縮放處理屏蔽屏幕尺寸和解析度的影響，保證內容元素數量的一致性。這種做法產生的結果是屏幕尺寸越大的設備顯示的內容元素越大，反之亦然。另一種是不進行縮放處理，保證內容元素大小的一致性。這種做法產生的結果是屏幕尺寸越大的設備在橫向上顯示的內容元素越多，反之亦然。
rem 適配
rem 適配是縮放處理設計思想的典型代表。rem 是一個相對單位，它永遠相對於根元素（html）的字體大小，這個特性方便了統一管理元素的大小，非常適合用來處理佈局。rem 適配通常採用如下的 viewport 設置:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
如何合理設置 rem 的大小呢？通常將頁面寬度進行 10 等分，即：
const rem = document.documentElement.clientWidth / 10
這樣，rem 的大小完全是隨屏幕正比變化，就能根據設計稿尺寸換算頁面元素和字體的大小。以常用的 750px 設計稿尺寸為例，假設設計稿的某個字體大小是 40px，換算成 rem 應該為 40 / 75 = 0.53333rem。當然這樣計算很麻煩，可以選擇使用構建工具postcss-pxtorem簡化這些工作。
註意：並非所有單位都需要轉換成 rem，通常只對需要等比縮放的元素進行 rem 換算，對於不需要縮放的元素，比如邊框陰影，使用 px 等其他單位。實際開發中，應該以 rem 單位為基礎，同時結合其他單位協同工作。
vw 適配
vw 是一個相對於 viewport 的單位，100vw 就等於 viewport 的寬度。vw 適配同樣是一個縮放處理設計思想的適配方案，得益於現代瀏覽器對 vw 單位的良好支持性而流行，它是比 rem 適配更優秀的適配方案。vw 適配通常採用如下的 viewport 設置:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
vw 適配如何換算元素大小呢？使用公式：（元素大小 / 設計稿大小）* 100vw 將元素大小轉換為 vw 單位的大小。以常用的 750px 設計稿尺寸為例，假設設計稿的某個字體大小是 40px，換算成 vw 單位大小應該為 （40 / 750）* 100vw = 5.33333vw。同樣可以選擇使用構建工具postcss-px-to-viewport簡化工作流程。
vw 適配和 rem 適配出自同一種設計思想，它們極其相似，vw 適配同樣需要結合其他單位協同工作。
彈性盒（Flexbox）適配
彈性盒（CSS Flexible Box Layout Module 簡稱 Flexbox）是一種用於在單個維度（行或列）中顯示項目的佈局模型。當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當的行為的佈局方式，提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。Flexbox 佈局的兩個基本概念：
- 容器：彈性佈局的父元素（display=flex的元素）。
- 項目：彈性佈局容器中的每一個子元素。
彈性盒適配就是採用了 Flexbox 佈局模型的適配方案，這種適配方案通常使用如下的 viewport 設置：
<meta name="viewport" content="width=device-width, initial-scale=1">
使用彈性盒適配的優點是不需要進行單位轉換，因為其不需進行縮放處理，因此通常情況下都使用 px 單位。彈性盒適配的基本原則是：
- 內容流式：即彈性項目（彈性佈局容器中的每一個子元素）的填充內容使用流式佈局。
- 佈局彈性：即涉及元素排列、對齊和空間分配時，使用彈性盒進行佈局。
目前，沒有完美的適配方式。實際開發中，應根據項目的需求和團隊的素質選用合適的方案。
