现象

首先说现象，大家都知道移动端设备屏幕尺寸非常多，碎片化严重。尤其是Android，你会听到很多种分辨率：480x800, 480x854, 540x960, 720x1280, 1080x1920，而且还有传说中的2K屏。近年来iPhone的碎片化也加剧了：640x960, 640x1136, 750x1334, 1242x2208。 

不要被这些尺寸吓倒。实际上大部分的app和移动端网页，在各种尺寸的屏幕上都能正常显示。说明尺寸的问题一定有解决方法，而且有规律可循。

像素密度（ppi）

要知道，屏幕是由很多像素点组成的。之前提到那么多种分辨率，都是手机屏幕的实际像素尺寸。比如480x800的屏幕，就是由800行、480列的像素点组成的。每个点发出不同颜色的光，构成我们所看到的画面。而手机屏幕的物理尺寸，和像素尺寸是不成比例的。最典型的例子，iPhone 3gs的屏幕像素是320x480，iPhone 4s的屏幕像素是640x960。刚好两倍，然而两款手机都是3.5英寸的。 

所以，我们要引入最重要的一个概念：像素密度，也就是PPI（pixels per inch）。这项指标是连接数字世界与物理世界的桥梁。

Pixels per inch，准确的说是每英寸的长度上排列的像素点数量。1英寸是一个固定长度，等于2.54厘米，大约是食指最末端那根指节的长度。像素密度越高，代表屏幕显示效果越精细。Retina屏比普通屏清晰很多，就是因为它的像素密度翻了一倍。

倍率与逻辑像素

再用iPhone 3gs和4s来举例。假设有个邮件列表界面，我们不妨按照PC端网页设计的思维来想象。3gs上大概只能显示4-5行，4s就能显示9-10行，而且每行会变得特别宽。但两款手机其实是一样大的。如果照这种方式显示，3gs上刚刚好的效果，在4s上就会小到根本看不清字。在现实中，这两者效果却是一样的。这是因为Retina屏幕把2x2个像素当1个像素使用。比如原本44像素高的顶部导航栏，在Retina屏上用了88个像素的高度来显示。导致界面元素都变成2倍大小，反而和3gs效果一样了。画质却更清晰。 

在以前，iOS应用的资源图片中，同一张图通常有两个尺寸。你会看到文件名有的带@2x字样，有的不带。其中不带@2x的用在普通屏上，带@2x的用在Retina屏上。只要图片准备好，iOS会自己判断用哪张，Android道理也一样。 

由此可以看出，苹果以普通屏为基准，给Retina屏定义了一个2倍的倍率（iPhone 6plus除外，它达到了3倍）。

屏幕密度（dpi）

根据前面讲的屏幕密度区间，你可以记住这样一个简单的计算方法： 

   mdpi区间的手机，dp=px。 

   hdpi区间的手机，dp算px要乘以1.5。 

   xhdpi区间的手机，dp算px要乘以2。 

   xxhdpi区间的手机，dp算px要乘以3。

在此基础上，Google顺便把手机按照屏幕的密度分了几个档次：

现在主流的手机，都可以找到自己所在的屏幕密度档次。比如一般来说720p的手机是xhdpi，1080p的是xxhdpi。

密度无关像素（dp）

dp 是一个虚拟的概念，是在程序运行的时候算出来的。怎么理解呢？Android设备那么多，分辨率也那么多，为此 Google搞了一个叫dp的东西，换算公式是dp=（dpi/160）*px。也就是说，在密度为160dpi的屏幕上，1px就是1dp。依次类推， 在320dpi的屏幕上，1dp就是2px。屏幕密度越大，1个dp对应的px也就越多。

根据前面讲的屏幕密度区间，这里有个简单的计算方法：

    mdpi区间的手机，1dp=1px。 

    hdpi区间的手机，dp算px要乘以1.5。 

    xhdpi区间的手机，dp算px要乘以2。 

    xxhdpi区间的手机，dp算px要乘以3。 

   xxxhdpi区间的手机，dp算px要乘以4。

单位

不难发现，真正决定显示效果的，是逻辑像素尺寸。为此，iOS和Android平台都定义了各自的逻辑像素单位。iOS的尺寸单位为pt，Android的尺寸单位为dp。说实话，两者其实是一回事。

   单位之间的换算关系随倍率变化： 

          1倍：1pt=1dp=1px（mdpi、iPhone 3gs）

          1.5倍：1pt=1dp=1.5px（hdpi）

          2倍：1pt=1dp=2px（xhdpi、iPhone 4s/5/6）

          3倍：1pt=1dp=3px（xxhdpi、iPhone 6）

          4倍：1pt=1dp=4px（xxxhdpi）

web怎么办

手机端网页就没有统一标准了，目前的做法是按照iPhone 7的尺寸来设计。倍率2，逻辑像素375x667。 

这样的做法比较实在，倍率2的屏幕无论在iOS还是Android方面都是主流，而且又是2倍屏幕中逻辑像素最大的。所以图片的尺寸可以保持在较好的水平，页面加载速度快。当然，缺点就是在倍率3的设备上看，图片不是特别清晰。 

如果追求图片质量，愿意牺牲加载速度，那么可以按照最大的屏幕来设计。也就是iPhone 7 plus的尺寸，倍率3，逻辑像素414x736。