移动端一堆分辨率的设备？碎片化？没接触过？
莫慌，跟着老司机走。
概念
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.jianshu.com/p/d1c6b78fe9e3
