4- 移动端尺寸基础知识 --分辨率，ppi dpi,px,pt,dp,sp

1-分辨率与像素密度

• 分辨率：
  屏幕是由很多像素点组成的。分辨率就是手机屏幕的像素点数，一般描述成屏幕的“宽×高”。比如720×1280表示此屏幕在宽度方向有720个像素点，在高度方向有1280个像素点。每个点发出不同颜色的光，构成我们所看到的画面。

  而手机屏幕的物理尺寸，和像素尺寸是不成比例的。最典型的例子，iPhone 3gs的屏幕像素是320×480，iPhone 4s的屏幕像素是640×960。刚好两倍，然而两款手机都是3.5英寸的。

• 屏幕大小：
  屏幕大小是手机对角线的物理尺寸，以英寸（inch）为单位。比如某某手机为“5寸大屏手机”，就是指对角线的尺寸，5寸×2.54厘米/寸=12.7厘米。

• 像素密度：
  也就是PPI（pixels per inch）或 dpi，dots per inch, 每英寸的长度上排列的像素点数量。这项指标是连接数字世界与物理世界的桥梁。

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

  假如我们知道一部手机的分辨率是1080×1920，屏幕大小是5英寸，能否算出此屏幕的密度呢？通过宽1080和高1920，根据勾股定理，我们得出对角线的像素数大约是2203，那么用2203除以5就是此屏幕的密度了，计算结果是440。440dpi的屏幕已经相当细腻了。

ppi

2-倍率与逻辑像素

iPhone 3gs与iPhone 4s，物理尺寸都示3.5英寸的， iPhone 3gs的屏幕像素是320×480，iPhone 4s的屏幕像素是640×960，4s上的像素密度是3gs的一倍，同样的像素大小，在4s上只有3gs上的一半大。

在现实中，这两者效果却是一样的。这是因为Retina屏幕把2×2个像素当1个像素使用。比如原本44像素高的顶部导航栏，在Retina屏上用了88个像素的高度来显示。导致界面元素都变成2倍大小，反而和3gs效果一样了，画质却更清晰。

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

苹果以普通屏为基准，给Retina屏定义了一个2倍的倍率（iPhone 6plus除外，它达到了3倍）。
实际像素除以倍率，就得到逻辑像素尺寸。只要两个屏幕逻辑像素相同，它们的显示效果就是相同的。

而Android屏幕尺寸实在太多，分辨率高低跨度非常大，不像苹果只有那么几款固定设备、固定尺寸。所以Android把各种设备的像素密度划成了好几个范围区间，给不同范围的设备定义了不同的倍率，来保证显示效果相近。

Android像素密度与倍率

如图所示，像素密度在120左右的屏幕归为ldpi，160左右的归为mdpi，以此类推。这样，所有的Android屏幕都找到了自己的位置，同时以160ppi作为基准，倍率为1倍，其余倍率依此类推：

• ldpi [0.75倍]
• mdpi [1倍]
• hdpi [1.5倍]
• xhdpi [2倍]
• xxhdpi [3倍]
• xxxhdpi [4倍]

Android的最小点击区域尺寸是48x48dp，这就意味着在xhdpi的设备上，按钮尺寸至少是96x96px。而在xxhdpi设备上，则是144x144px。逻辑像素都是48dp*48dp, 他们的显示大小是一样的。

所以为了保证准确高效的沟通，无论是在标注图还是在日常沟通中，设计人员与开发人员都需要尽量以逻辑像素尺寸来描述和理解界面，真正决定显示效果的，是逻辑像素尺寸。

自然地，以1倍的mdpi作为基准。像素密度更高或者更低的设备，只需乘以相应的倍率，就能得到与基准倍率近似的显示效果。

不过需要注意的是，Android设备的逻辑像素尺寸并不统一。

比如两种常见的屏幕480×800和1080×1920，它们分别属于hdpi和xxhdpi。除以各自倍率1.5倍和3倍，得到逻辑像素为320×533和360×640。很显然，后者更宽更高，能显示更多内容。

所以，即使有倍率的存在，各种Android设备的显示效果仍然无法做到完全一致。

3-单位

• px : pixels,像素，屏幕上实际的像素点单位
• pt：point，是一个标准的长度单位，1pt＝1/72英寸，而在iOS中，以普通屏为基准，1pt=1px；
• dp : device independent pixels, 设备独立像素，安卓专用长度单位，以160ppi屏幕为标准，则1dp=1px。dp*ppi/160=px。
• sp : scaled pixels,放大像素，安卓专用字体单位，以160ppi屏幕为标准，字体大小为100%时，则1dp=1px

真正决定显示效果的，是逻辑像素尺寸。为此，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 plus）
• 4倍：1pt=1dp=4px（xxxhdpi）

4-设计尺寸

这里是指逻辑像素尺寸，一般参照倍率为2的屏幕，无论在iOS还是Android方面主流屏幕都是2倍倍率。

iOS一般参照iPhone 6的屏幕，倍率为2，逻辑像素375×667。

Android屏幕逻辑像素已经趋于统一了：360×640。

欢迎关注