px pt sp dp dip dpi ppi ,不再傻傻分不清

文|丹顶鹤的日记本

开门见山,直接进入主题。

一. 发明这些单位的原因:

UI设计师和前端工程师,在设计和实现UI界面的时候,显示效果,会受到不同设备的尺寸和分辨率的影响。
dp,sp,pt这些逻辑单位,便被发明出来,作用就是削弱这种影响。

为了说明白,首先引入3个概念:

px(pixel)像素

像素是电子显示器上,组成图像的最小单位。

ppi(pixel per inch 或 pixel/inch) 像素密度

Photoshop文件属性设置
Photoshop->new

ppi指的是,每英寸所显示的像素数。

ppi越高,图像越细腻。

不同设备的ppi的差异,是发明逻辑像素的一个重要原因。

分辨率的单位是 pixel 还是 PPI?这个各大手机官网都不一致,暂且认为两者都对

这里我查找了一些手机的官网,发现他们对于分辨率的定义也不是很统一。
HTC官网的表达方式:“分辨率高达 401ppi”

HTC官网

小米官网的表达方式:“分辨率为 2560x1440”

小米官网

苹果官网的表达方式如下:

苹果中国官网
Apple.Inc

iOS 系统,引入单位pt

pt(point) 点

点是一个逻辑概念,相同点数的图像,在物理上是一样大的,但是由不同多的像素点组成。

物理尺寸一样,屏幕尺寸2倍

iPhone4/5/6/7
1pt = 2px

iPhone6plus/7plus
1pt= 3px


Android 系统,引入单位 dp/dip(device-independent pixel/ density-independent pixel),sp(scale-independent pixel)

dp 又叫 dip ,设备无关像素。 和iOS的point的作用相同。

sp 缩放无关像素。是用来定义字号的逻辑单位。
因为安卓系统允许用户自定义字大小,在默认情况下,1dp=1sp。

dp/sp是逻辑概念,相同点数的图像,在物理上是一样大的,但是由不同多的像素点组成。

ppi = 160 1dp=1px 标清
ppi = 240 1dp = 1.5 px 高清
ppi = 320 1dp = 2px 超高清(>300ppi, 视网膜显示)
ppi = 480 1dp = 3px


dpi这个捣蛋鬼

dpi 是打印分辨率,前端和UI几乎用不到这个概念,却经常被这个概念干扰。

  • 干扰1 :dpi(device-independent pixel) 和 dip(dot per inch) 长得太像。

dip 又叫 dp, 但是 dpi是完全不同的概念。
dpi 用于打印机,指的是打印机在每英寸上打印的点数。dpi越高,图片越细腻。

  • 干扰2:ppi dpi以为是一个

ppi反应的是电子显示器上显示图像的质量
dpi反应的是打印机打印图片的质量

  • 干扰3:ldpi/hdpi/xhdpi/xxhdpi 是用来形容电子屏幕的,但是这里的d(density)和 打印分辨率的 d(dot)是不同的缩写啊

ldpi(low density per inch)低清
mdpi (middle density per inch )标清
hdpi (high density per inch)高清

dpi (dot per inch)


网络上,这方面的文章很多,通常是洋洋洒洒很长,却找不到我最需要的部分。这篇文章,我选择了我日常工作中使用频率最高的概念,希望可以减轻读者的阅读负担。

推荐阅读更多精彩内容