移动端设备屏幕尺寸非常多,碎片化严重。尤其是Android,你会听到很多种分辨率:480x800, 480x854, 540x960, 720x1280, 1080x1920,而且还有传说中的2K屏。近年来iPhone的碎片化也加剧了:640x960, 640x1136, 750x1334, 1242x2208。
屏幕是由很多像素点组成的。之前提到那么多种分辨率,都是手机屏幕的实际像素尺寸。比如480x800的屏幕,就是由800行、480列的像素点组成的。每个点发出不同颜色的光,构成我们所看到的画面。而手机屏幕的物理尺寸,和像素尺寸是不成比例的。最典型的例子,iPhone 3gs的屏幕像素是320x480,iPhone 4s的屏幕像素是640x960。刚好两倍,然而两款手机都是3.5英寸的。
所以,我们要引入最重要的一个概念:像素密度,也就是PPI(pixels per inch)。这项指标是连接数字世界与物理世界的桥梁。
PPI
像素密度,每英寸的长度上排列的像素点数量。
PPI的计算方式
屏幕多少英寸指的是对角线的长度。像素密度是指(以1920×1080,5英寸为例),1920和1080的平方和开根号(就是直角三角形斜边长的算法),开出来等于2202.9,除以5英寸就得到PPI为441左右。
倍率
实际像素除以倍率,就得到逻辑像素尺寸。只要两个屏幕逻辑像素相同,它们的显示效果就是相同的。
像素密度在120左右的屏幕归为ldpi,160左右的归为mdpi,以此类推。这样,所有的Android屏幕都找到了自己的位置,并赋予了相应的倍率:
- ldpi [0.75倍]
- mdpi [1倍]
- hdpi [1.5倍]
- xhdpi [2倍]
- xxhdpi [3倍]
- xxxhdpi [4倍]
关于单位
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)