对于UI尺寸这方面的知识一直模模糊糊的,对分辨率、ppi、dpi、pt、px 等傻傻分不清楚,今日特此总结。
单位
px
pixel 像素,屏幕上的最小发光单位。pt
point 一个标准的长度单位,1pt=1/72 inch。在ios中以普通屏为基准,1pt = 1px。dp
device independent pixels 设备独立像素,android专用长度单位,以160ppi屏幕为标准,则1dp=1px,即
1dp = PPI/160*1px
(大写单词表示变量,小写单词表示单位)sp
scaled pixels 放大像素,android专用字体单位,以160ppi屏幕为标准,字体大小为100%时,则1sp = 1px。dpi
dot per inch 每英寸有多少个点。
dpi最初用于衡量打印物上每英寸的点数密度。dpi值越高图片越精细。当dpi的概念应用在计算机屏幕上时,就称之为ppi。
同理,ppi就是计算机屏幕上每英寸可以显示的像素点的数量。因此在电子屏幕中dpi = ppi 。
iPhone尺寸规格
下面将以这张图为例进行讲解。
概念
英寸(inch)
1 inch = 2.54cm = 25.4mm-
屏幕尺寸
即屏幕的对角线长度。以iPhone 6 为例,屏幕尺寸等于屏幕对角线的长度4.7
英寸 像素/像素点(pixel)
屏幕的最小发光单位。缩写为px设备分辨率
屏幕上像素点的数量。以iPhone 6 为例,设备分辨率为750*1334,即横向最多可划分为750个像素点,纵向最多可划分为1334个像素点。
-
像素密度(PPI)
- 版本一
Pixel Per Inch by diagonal : 沿着对角线,每英寸所拥有的像素点数
量。
以iphone 6 为例,ppi是326,根据勾股定理,由以下公式计算可得结果为325.6122832234
,和结果有些误差。
- 版本二
ppi 或 PPI (Pixels Per Inch),像素密度(pixel density)单位,即每英寸的长度中所具有的像素。由分辨率中X或Y轴的数字除以该轴的长度(英寸),可得该轴的像素每英寸密度。一般的像素是方形或接近方形,X与Y轴像素密度相同,但也有不相同的显示器。维基百科
- 版本一
注释:X是水平像素分辨率,x是屏幕物理宽度;
Y是竖直像素分辨率,y是屏幕物理高度
个人思考
实际版本二
才是正确的定义和计算方法,那为什么会出现版本一
呢?
已知条件是屏幕分辨率
和屏幕尺寸
,版本二中的公式需要宽度和高度,而已知的屏幕尺寸
是屏幕对角线的长度,所以推导出以下公式,继而推导出版本一中的计算方式。
(X/x)²=(Y/y)² = (X²+Y²)/(x²+y²)= (X²+Y²)/(c²)
c代表屏幕尺寸,即对角线长度。
实际上在正方形中
-
缩放因子(scale)
- 起源
早期的iPhone 3GS的屏幕分辨率是320*480,IOS绘制图形以point为单位,
1 point = 1 pixel
后来在iphone中,同样大小(3.5inch)的屏幕采用了Retina显示屏,横,纵向的像素密度被放大到两倍,
设备分辨率提高到(320×2)×(480×2)=640×960
,显像分辨率提升至iPhone 3GS的4倍(一个Point被渲染成一个2×2的像素矩阵)。
1 point = SCALE × 1 pixel
(在iPhone 4~6中,缩放因子scale=2;在iphone 6+ 中,缩放因子scale = 3)
- 起源
逻辑分辨率
逻辑分辨率的基本单位是point,设备分辨率的基本单位是pixel。
不同的屏幕具有不同的缩放因子,逻辑分辨率 = 设备分辨率 / 缩放因子
-
@2x/@3x 高倍图
由于缩放因子的存在,在制作图标时,针对不同分辨率的屏幕要提供不同倍率的图标。
在iphone 3GS中,scale =1 ,用的图标是50×50
pixel(logicalimage.size=50×50point)
在iphone 4~6 中,scale =2 ,用的图标是100×100
pixel(logicalimage.size=50×50point)
在iphone 6+ 中,scale =3 ,用的图标是150×150
pixel(logicalimage.size=50×50point)- 关于6+的设备分辨率
为什么要写成(1242×2208->)1080×1920。
我们可以观察到,scale和PPI是正相关的,而401/326*2 ≈ 2.46 ,即在iphone 6plus上,缩放因子应该是
@2.46,但是对于开发者很不方便,所以取为@3x,而最后iphone会自动缩放到@2.46。
- 关于6+的设备分辨率
参考
简书-星空下的菜地-iPhone屏幕尺寸、分辨率及适配
脚本之家在线工具-UI尺寸规范
screensiz
SNOW-八一八那些px、pt、ppi、dpi、dp、sp之间的关系
移动端尺寸基础知识