隨著技術的發展，移動裝置越來越流行，並且不同裝置間螢幕尺寸和螢幕畫素的差異，移動端開發面臨著多解析度適配的問題。 ## 基本概念 響應式開發本質時針對多種螢幕做適配，在實際開發中，通常情況下時針對主流的裝置進行適配。在開發前，必須掌握幾個基本概念： * 物理畫素：即螢幕的實際畫素點。畫素是螢幕裝置的最小顯示單元，如 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 設定如下： ```html ``` **Viewport 屬性：** | 屬性 | 含義 | 取值 | | :-----| :---- | :---- | | width | 定義視口的寬度，單位為畫素 | 正整數或 device-width（裝置的寬度） | | height | 定義視口的高度，單位為畫素 | 正整數或 device-height（裝置的高度） | | initial-scale | 定義初始縮放比例 | 整數或小數 | | maximum-scale | 定義允許使用者縮放到的最大比例 | 整數或小數 | | minimum-scale | 定義允許使用者縮放到的最小比例 | 整數或小數 | | user-scalable | 定義是否允許使用者縮放 | yes或no | ## 適配方案 對於移動端適配的方案，市面上有很多種。細心觀察會發現，實際上這些適配方案是基於兩種不同的設計思想而產生的。一種是通過縮放處理遮蔽螢幕尺寸和解析度的影響，保證內容元素數量的一致性。這種做法產生的結果是螢幕尺寸越大的裝置顯示的內容元素越大，反之亦然。另一種是不進行縮放處理，保證內容元素大小的一致性。這種做法產生的結果是螢幕尺寸越大的裝置在橫向上顯示的內容元素越多，反之亦然。 ### rem 適配 rem 適配是縮放處理設計思想的典型代表。rem 是一個相對單位，它永遠相對於根元素（html）的字型大小，這個特性方便了統一管理元素的大小，非常適合用來處理佈局。rem 適配通常採用如下的 viewport 設定: ```html ``` 如何合理設定 rem 的大小呢？通常將頁面寬度進行 10 等分，即： ```js const rem = document.documentElement.clientWidth / 10 ``` 這樣，rem 的大小完全是隨螢幕正比變化，就能根據設計稿尺寸換算頁面元素和字型的大小。以常用的 750px 設計稿尺寸為例，假設設計稿的某個字型大小是 40px，換算成 rem 應該為 40 / 75 = 0.53333rem。當然這樣計算很麻煩，可以選擇使用構建工具[postcss-pxtorem](https://github.com/cuth/postcss-pxtorem)簡化這些工作。 > 注意：並非所有單位都需要轉換成 rem，通常只對需要等比縮放的元素進行 rem 換算，對於不需要縮放的元素，比如邊框陰影，使用 px 等其他單位。實際開發中，應該以 rem 單位為基礎，同時結合其他單位協同工作。 ### vw 適配 vw 是一個相對於 viewport 的單位，100vw 就等於 viewport 的寬度。vw 適配同樣是一個縮放處理設計思想的適配方案，得益於現代瀏覽器對 vw 單位的良好支援性而流行，它是比 rem 適配更優秀的適配方案。vw 適配通常採用如下的 viewport 設定: ```html ``` vw 適配如何換算元素大小呢？使用公式：（元素大小 / 設計稿大小）* 100vw 將元素大小轉換為 vw 單位的大小。以常用的 750px 設計稿尺寸為例，假設設計稿的某個字型大小是 40px，換算成 vw 單位大小應該為 （40 / 750）* 100vw = 5.33333vw。同樣可以選擇使用構建工具[postcss-px-to-viewport](https://github.com/evrone/postcss-px-to-viewport)簡化工作流程。 vw 適配和 rem 適配出自同一種設計思想，它們極其相似，vw 適配同樣需要結合其他單位協同工作。 ### 彈性盒（Flexbox）適配 彈性盒（CSS Flexible Box Layout Module 簡稱 Flexbox）是一種用於在單個維度（行或列）中顯示專案的佈局模型。當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的佈局方式，提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。Flexbox 佈局的兩個基本概念： * 容器：彈性佈局的父元素（display=flex的元素）。 * 專案：彈性佈局容器中的每一個子元素。 彈性盒適配就是採用了 Flexbox 佈局模型的適配方案，這種適配方案通常使用如下的 viewport 設定： ```html ``` 使用彈性盒適配的優點是不需要進行單位轉換，因為其不需進行縮放處理，因此通常情況下都使用 px 單位。彈性盒適配的基本原則是： * 內容流式：即彈性專案（彈性佈局容器中的每一個子元素）的填充內容使用流式佈局。 * 佈局彈性：即涉及元素排列、對齊和空間分配時，使用彈性盒進行佈局。 目前，沒有完美的適配方式。實際開發中，應根據專案的需求和團隊的素質選用合適的