移動端一堆分辨率的設備？碎片化？沒接觸過？

莫慌，跟著老司機走。

概念

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