LMLPHP后院

谈谈关于技术和设计中 px dp in 等的含义技术

maybe yes 发表于 2016-12-30 22:28

本文将使用简单易懂的语言简述 inch,mm,px,pt,dp,dip,sp,ppi,dpi 的含义。

其实关于 UI 设计技术领域的大小单位特别多,上面也就是列举了常见的部分单位。而市面上的文章大多数都是长篇大论,讲述的不是很清楚,并且涵盖的不全面。

首选说一说长度单位,有 inch,mm,pt。

Inch

不得不说,大英帝国不愧是日不落帝国,Inch 是长度单位,表示的是英寸,约等于 2.54 厘米。

mm

mm 是毫米的意思,个人感觉用的比较少,只是它代表的是毫米的意思。

pt

pt 也是长度单位,表示 1/72 英寸,约等于 0.0353 厘米。

长度单位很容易理解,说完了长度单位,接下来先解释下 dpi 和 ppi。

dpi,ppi

dpi 是 Dots Per Inch 的缩写,ppi 是 Pixels Per Inch 的缩写,两者在表示屏幕时是同一个意思。

个人认为,dp 不算是长度单位。虽然从公式上来看,理论上它也是长度单位,但是现实情况下,手机的分辨率是有极限的,跟理论相差很大,相同的 dp 在不同的手机上显示的大小会有差距,这个肉眼完全能辨别,所以我认为它不属于长度单位。

dp

dp 据说是安卓为了适应不同分辨率的手机而发明的一种单位。其实我是很讨厌这些大公司随随便便发明东西的,在技术领域特别前端已经被各大公司搞的乌烟瘴气,并且这些东西并没有很好的解决问题。还有浏览器技术和 ES6,ES7 的不断推出的新特性等等,搞了这么多新玩意儿简直是唯恐天下不乱,也许各大主流公司都希望自己能主宰技术吧。

谷歌认为,在一英寸屏幕区域长度内能显示 160 个点时,dp 和 px 是相等的,这也是正常的 PC 屏幕。但是手机屏幕普遍比较精细,所以有了这样一个换算公式:1dp = (dpi / 160)px。

dip

与 dp 完全相同,只是名字不同而已。在早期的 Android 版本里多使用 dip,后来为了与 sp 统一就建议使用 dp 这个名字了。

sp

与缩放无关的抽象像素(Scale-independent Pixel),有了 dp 之后,为什么又弄了一个 sp 出来。安卓操作系统设置里面有个功能,是可以调整文字尺寸大小的(小、正常、大、超大等等)。sp 其实和 dp 的换算是相同的,差别就在于 sp 是专门为字体服务的,字体使用了 sp 之后,设置里面的字体大小设置才会对它起作用。

px

px 是像素的意思,很容易被前端工程师误解为长度单位,其实是度量单位。在网页设计亦或是在移动领域的开发中,px 还是使用的最多的一个单位。有人认为 px 不适合移动端,其实这种说法是不对的,在 viewport 的声明下,使用 px 作为移动网页开发单位还是最合适不过啦。

2024-07-13 05:43:07 1720820587 0.026466