随着技術的發展，移動裝置越來越流行，并且不同裝置間螢幕尺寸和螢幕像素的差異，移動端開發面臨着多分辨率适配的問題。
基本概念
響應式開發本質時針對多種螢幕做适配，在實際開發中，通常情況下時針對主流的裝置進行适配。在開發前，必須掌握幾個基本概念：
實體像素：即螢幕的實際像素點。像素是螢幕裝置的最小顯示單元，如 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 适配同樣需要結合其他機關協同工作。
資源搜尋網站大全 http://www.szhdn.com 廣州VI設計公司https://www.houdianzi.com
彈性盒（Flexbox）适配
彈性盒（css Flexible Box Layout Module 簡稱 Flexbox）是一種用于在單個次元（行或列）中顯示項目的布局模型。當頁面需要适應不同的螢幕大小以及裝置類型時確定元素擁有恰當的行為的布局方式，提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和配置設定空白空間。Flexbox 布局的兩個基本概念：
容器：彈性布局的父元素（display=flex的元素）。
項目：彈性布局容器中的每一個子元素。
彈性盒适配就是采用了 Flexbox 布局模型的适配方案，這種适配方案通常使用如下的 viewport 設定：
<meta name="viewport" content="width=device-width, initial-scale=1">
使用彈性盒适配的優點是不需要進行機關轉換，因為其不需進行縮放處理，是以通常情況下都使用 px 機關。彈性盒适配的基本原則是：
内容流式：即彈性項目（彈性布局容器中的每一個子元素）的填充内容使用流式布局。
布局彈性：即涉及元素排列、對齊和空間配置設定時，使用彈性盒進行布局。
目前，沒有完美的适配方式。實際開發中，應根據項目的需求和團隊的素質選用合适的方案。