還原設計稿，也就是如何適配移動端繁雜的螢幕大小。
通常而言，設計師只會給出單一解析度下的設計稿，而我們要做的，就是以這個設計稿為基準，去適配所有不同大小的移動端裝置。
在此之前，有一些基礎概念需要理解。
以 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） 裝置畫素比，這個與我們通常說的視網膜屏（多倍屏，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。
chrome之前是不支援12px以下的中文的，因為覺得中文小於12px識別難度太大了，在移動端就我的開發經驗來看
當設定小於12px的字型時，ios沒問題，但是安卓會有問題，即便是用了-webkit-text-size-adjust也不行，因為有的安卓瀏覽器不支援這個特性
如果真的需要有小於12px的字的話，建議用scale來做，這樣可以保證各個端的一致性
總結：上面三個概念（css畫素、裝置獨立畫素、dpr）是我覺得比較重要的，還有一些其他比較重要的概念 ppi、dpi 不影響後續的內容，可以自行去加深理解。
移動端適配方案
最簡單的移動端適配方案 rem vw 1vw等於螢幕寬度的1 1vh等於螢幕高度的1 通常設計稿為750寬度，螢幕總寬度為100vw 那麼 100vw 750px 1px 1px 100 750 1px就等於0.13333333vw 把單位放大100倍便於計算 html設計稿畫素單位轉換為rem單位...
移動端適配方案
先來看下目前iphone各個型號尺寸和解析度 我們所能看到的手機端瀏覽器的可視視窗大小 viewport分為三種 layout viewport 布局檢視 移動裝置瀏覽器認為自己必須能夠讓所有 都顯示 即便那些不是為移動瀏覽器設計的 所以設計了乙個大於螢幕尺寸的viewport 用來相容那些不是為移...
移動端適配方案
尺寸 超小屏 768以下 小屏 768 992 中屏 992 1200 寬屏 1200以上 適配方案 適配細節 在網頁 的頭部，加入一行viewport元標籤。viewport是網頁預設的寬度和高度，上面這行 的意思是，網頁寬度預設等於螢幕寬度 width device width 原始縮放比例 i...