還原設計稿，也就是如何適配移動端繁雜的屏幕大小。
通常而言，設計師只會給出單一分辨率下的設計稿，而我們要做的，就是以這個設計稿為基准，去適配所有不同大小的移動端設備。
在此之前，有一些基礎概念需要理解。
設備獨立像素
以 iPhone6/7/8為例，這里我們打開 Chrome 開發者工具：
這里的 375 * 667 表示的是什么呢，表示的是設備獨立像素（DIP），也可以理解為 CSS 像素，也稱為邏輯像素：
設備獨立像素 = CSS 像素 = 邏輯像素
如何記憶呢？這里使用 CSS 像素來記憶，也就是說。我們設定一個寬度為 375px 的 div，剛好可以充滿這個設備的一行，配合高度 667px ，則 div 的大小剛好可以充滿整個屏幕。
物理像素
ppi是指屏幕上每英寸可以顯示的像素點的數量，即屏幕像素密度（因此PPI數值越高，即代表顯示屏能夠以越高的密度顯示圖像。當然，顯示的密度越高，擬真度就越高）
可以看到，iPhone7 的分辨率是 1334 x 750，這里描述的就是屏幕實際的物理像素。
物理像素，又稱為設備像素。顯示屏是由一個個物理像素點組成的，1334 x 750 表示手機分別在垂直和水平上所具有的像素點數。通過控制每個像素點的顏色，就可以使屏幕顯示出不同的圖像，屏幕從工廠出來那天起，它上面的物理像素點就固定不變了，單位為pt。
設備像素 = 物理像素
DPR(Device Pixel Ratio) 設備像素比
DPR（Device Pixel Ratio） 設備像素比，這個與我們通常說的視網膜屏（多倍屏，Retina屏）有關。
設備像素比描述的是未縮放狀態下，物理像素和設備獨立像素的初始比例關系。
計算公式： DPR = 物理像素 / 設備獨立像素
我們套用一下上面 iPhone7 的數據 （750 / 375 = 2） dpr = 2
可以得到 iPhone7 的 dpr 為 2。也就是我們常說的視網膜屏幕。
視網膜（Retina）屏幕是蘋果公司"發明"的一個營銷術語。 蘋果公司將 dpr > 1 的屏幕稱為視網膜屏幕。
在視網膜屏幕中，以 dpr = 2 為例，把 4(2x2) 個像素當 1 個像素使用，這樣讓屏幕看起來更精致，但是元素的大小本身卻不會改變：
我們再來看看 iPhone XS Max： 它的 CSS 像素是 896 x 414，很容易得出 iPhone XS Max 的 dpr 為 3。
font-size 字體大小
chrome之前是不支持12px以下的中文的，因為覺得中文小於12px識別難度太大了，在移動端就我的開發經驗來看
-
當設置小於12px的字體時，ios沒問題，但是安卓會有問題，即便是用了
-webkit-text-size-adjust也不行，因為有的安卓瀏覽器不支持這個特性 -
如果真的需要有小於12px的字的話，建議用
scale來做，這樣可以保證各個端的一致性
總結：上面三個概念（CSS像素、設備獨立像素、DPR）是我覺得比較重要的，還有一些其他比較重要的概念 PPI、DPI 不影響后續的內容，可以自行去加深理解。