移動端適配必須掌握的基本概念和適配方案

隨着技術的發展，移動設備愈來愈流行，而且不一樣設備間屏幕尺寸和屏幕像素的差別，移動端開發面臨着多分辨率適配的問題。

基本概念

響應式開發本質時針對多種屏幕作適配，在實際開發中，一般狀況下時針對主流的設備進行適配。在開發前，必須掌握幾個基本概念：

• 物理像素：即屏幕的實際像素點。像素是屏幕設備的最小顯示單元，如 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 設置以下：

Viewport 屬性：

屬性	含義	取值
width	定義視口的寬度，單位爲像素	正整數或 device-width（設備的寬度）
height	定義視口的高度，單位爲像素	正整數或 device-height（設備的高度）
initial-scale	定義初始縮放比例	整數或小數
maximum-scale	定義容許用戶縮放到的最大比例	整數或小數
minimum-scale	定義容許用戶縮放到的最小比例	整數或小數
user-scalable	定義是否容許用戶縮放	yes或no

適配方案

對於移動端適配的方案，市面上有不少種。細心觀察會發現，實際上這些適配方案是基於兩種不一樣的設計思想而產生的。一種是經過縮放處理屏蔽屏幕尺寸和分辨率的影響，保證內容元素數量的一致性。這種作法產生的結果是屏幕尺寸越大的設備顯示的內容元素越大，反之亦然。另外一種是不進行縮放處理，保證內容元素大小的一致性。這種作法產生的結果是屏幕尺寸越大的設備在橫向上顯示的內容元素越多，反之亦然。

rem 適配

rem 適配是縮放處理設計思想的典型表明。rem 是一個相對單位，它永遠相對於根元素（html）的字體大小，這個特性方便了統一管理元素的大小，很是適合用來處理佈局。rem 適配一般採用以下的 viewport 設置:

如何合理設置 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 設置:

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 設置：

使用彈性盒適配的優勢是不須要進行單位轉換，由於其不需進行縮放處理，所以一般狀況下都使用 px 單位。彈性盒適配的基本原則是：

• 內容流式：即彈性項目（彈性佈局容器中的每個子元素）的填充內容使用流式佈局。
• 佈局彈性：即涉及元素排列、對齊和空間分配時，使用彈性盒進行佈局。

目前，沒有完美的適配方式。實際開發中，應根據項目的需求和團隊的素質選用合適的方案。