移動端一堆分辨率的設(shè)備俭令？碎片化费薄？沒接觸過硝全？
莫慌，跟著老司機(jī)走楞抡。
概念
1.像素密度-PPI
每英寸面積的像素數(shù)量伟众。
iPhone 3gs的屏幕像素是320x480，iPhone 4s的屏幕像素是640x960召廷。都是3.5寸的手機(jī)凳厢。
尺寸沒變，變的是像素的個數(shù)竞慢。
2.倍率與邏輯像素
蘋果以普通屏為基準(zhǔn)先紫，給Retina屏定義了一個2倍的倍率（iPhone 6plus除外，它達(dá)到了3倍）筹煮。
實際像素除以倍率遮精，就得到邏輯像素尺寸。只要兩個屏幕邏輯像素相同寺谤，它們的顯示效果就是相同的仑鸥。（可能原始素材圖不一樣）
3.實戰(zhàn)解決
以iPhone 5s為例吮播，屏幕的分辨率是640x1136变屁，倍率是2。
瀏覽器會認(rèn)為屏幕的分辨率是320x568意狠，仍然是基準(zhǔn)倍率的尺寸粟关。
所以在制作頁面時，只需要按照基準(zhǔn)倍率來就行了环戈。
在準(zhǔn)備資源圖的時候闷板，需要準(zhǔn)備2倍大小的圖，通過代碼把它縮成1倍大小顯示院塞，保證清晰遮晚。
4.一些邏輯像素
ios
iPhone5s 邏輯像素320x568 倍率為2
iPhone 6 邏輯像素375x667 ?倍率為2
安卓
都說Android碎片化嚴(yán)重，但它現(xiàn)在反而比iOS好處理拦止。
因為如今的Android屏幕邏輯像素已經(jīng)趨于統(tǒng)一了：360x640县遣。
wap
比較流行的做法是按照iPhone 5的尺寸來設(shè)計。倍率2汹族，邏輯像素320x568萧求。
這樣的做法比較實在，倍率2的屏幕無論在iOS還是Android方面都是主流顶瞒，而且又是2倍屏幕中邏輯像素最小的夸政。所以圖片的尺寸可以保持在較小的水平，頁面加載速度快榴徐。當(dāng)然守问，缺點就是在倍率3的設(shè)備上看匀归，圖片不是特別清晰。
如果追求圖片質(zhì)量耗帕，愿意犧牲加載速度朋譬，那么可以按照最大的屏幕來設(shè)計。也就是iPhone 6 plus的尺寸兴垦，倍率3徙赢，邏輯像素414x736。
總結(jié)
移動端的尺寸比PC端復(fù)雜探越，關(guān)鍵就在倍率狡赐。
但也正因為倍率的存在，把大大小小的屏幕拉回到同一水平線钦幔，得以保證一套設(shè)計適應(yīng)各種屏幕枕屉。站在這條水平線的角度看，會發(fā)現(xiàn)它很好理解鲤氢。
原文鏈接：http://www.reibang.com/p/d1c6b78fe9e3
