移動端一堆分辨率的設備？碎片化？沒接觸過？
莫慌，跟著老司機走。
概念
1.像素密度-PPI
每英寸面積的像素數量。
iPhone 3gs的屏幕像素是320x480，iPhone 4s的屏幕像素是640x960。都是3.5寸的手機。
尺寸沒變，變的是像素的個數。
2.倍率與邏輯像素
蘋果以普通屏為基準，給Retina屏定義了一個2倍的倍率（iPhone 6plus除外，它達到了3倍）。
實際像素除以倍率，就得到邏輯像素尺寸。只要兩個屏幕邏輯像素相同，它們的顯示效果就是相同的。（可能原始素材圖不一樣）
3.實戰解決
以iPhone 5s為例，屏幕的分辨率是640x1136，倍率是2。
瀏覽器會認為屏幕的分辨率是320x568，仍然是基準倍率的尺寸。
所以在制作頁面時，只需要按照基準倍率來就行了。
在準備資源圖的時候，需要準備2倍大小的圖，通過代碼把它縮成1倍大小顯示，保證清晰。
4.一些邏輯像素
ios
iPhone5s 邏輯像素320x568 倍率為2
iPhone 6 邏輯像素375x667 ?倍率為2
安卓
都說Android碎片化嚴重，但它現在反而比iOS好處理。
因為如今的Android屏幕邏輯像素已經趨于統一了：360x640。
wap
比較流行的做法是按照iPhone 5的尺寸來設計。倍率2，邏輯像素320x568。
這樣的做法比較實在，倍率2的屏幕無論在iOS還是Android方面都是主流，而且又是2倍屏幕中邏輯像素最小的。所以圖片的尺寸可以保持在較小的水平，頁面加載速度快。當然，缺點就是在倍率3的設備上看，圖片不是特別清晰。
如果追求圖片質量，愿意犧牲加載速度，那么可以按照最大的屏幕來設計。也就是iPhone 6 plus的尺寸，倍率3，邏輯像素414x736。
總結
移動端的尺寸比PC端復雜，關鍵就在倍率。
但也正因為倍率的存在，把大大小小的屏幕拉回到同一水平線，得以保證一套設計適應各種屏幕。站在這條水平線的角度看，會發現它很好理解。
原文鏈接：http://www.lxweimin.com/p/d1c6b78fe9e3
