在 iOS 的世界也是这么运作的，我们在初代 iPhone 上标出一颗红色的 pixel，然后说它的长度(或宽度)叫做「1 pt」，这颗红色的点拿到有视网膜屏幕、密度两倍的 iPhone 4 上，它的长度就会涵盖了视网膜屏幕上的 2px;若拿到三倍密度的 Plus 上面，猜猜这个小红点的长度会涵盖几 px?

　　如果你知道为什么会是 3px，那恭喜你真的完全弄懂了背后的机制，就是这样子而已，现在我们来看看 Android。

　　Android 的 dp 单位

　　在 Android 的世界里，手机厂牌型号好多好多，屏幕大小和密度也是一团乱;Google 身为教主，当然要制订一套规则来一统天下，方法呢，就是制定好几个「密度等级」：

　　如果你的屏幕分辨率落在 160 ppi 左右的话(注)，我们就称之为「MDPI (中等分辨率)」;那如果你的屏幕分辨率落在 320 ppi 左右呢，就叫做「XHDPI，Extra-High (超高分辨率)」⋯⋯其余按图类推。

　　注：Android 用的单位叫 dpi，但为了沟通方便，我们都还是用 ppi

　　接着就跟苹果一样。学人精 Google 说，我们把 MDPI 的屏幕定为基准点，它是一倍像素密度(上头写的 1x)，我们在这颗屏幕上挑一颗 pixel，把它弄成红色，接着把这个小红点移到 XHDPI 的 2x 屏幕上的时候，它就会变成涵盖 2px 了，所以以后就把这颗小红点的尺寸变成新单位，iOS 叫做「pt」是吧?好，那这个新单位我叫它「dp (Density-Independent Pixels)」!

　　所以，iOS 的 pt 和 Android 的 dp 其实是相同的运作原理，使用它当单位来做图、沟通，就可以避免使用 px 造成的偏差了。

　　网页设计里的 pt 单位

　　除了 iOS 和 Android 外，如果也有接触网页设计的朋友，可能知道 CSS 里也有 pt 这个单位可以使用，但在这里先给结论：CSS 的 pt 单位和我们前面所提的 iOS pt 其实是没有关系的，其运作方式也不相同，所以硬要放在一起想就会永远搞不清楚啦!

　　pt 这个单位词，其实最早源自于传统的铅字印刷，是用来表示铅字块的尺寸，在印刷和平面设计的世界里，1 pt = 1/72 英吋;而 CSS 之所以有 pt 这个单位，其实是要把网页印刷/打印出来的时候用到的。

　　在网页设计里，屏幕显示和实体印刷，可以拥有两份不同的 CSS 来决定样式;习惯良好的网页设计师，会特别写一份 CSS，在印刷的时候给计算机使用(例如拿掉背景图、字体颜色改成灰阶，比较省墨水)，而实体世界的字级单位：pt 就会在这时派上用场，所以其实 CSS 里的 pt 单位，不是让你拿来在屏幕上使用的喔!

　　适合屏幕显示的 CSS 单位有 em、rem、px ??等等，有兴趣的朋友可以再自行究。

　　结论

　　OK，今天这篇文章已经完成单位的观念解释，而在做图时的单位应用、出图时的注意事项，我们下篇文章再来研究。如果这篇文对你有帮助，也分享出去给更多人一起精进吧!

　　作者介绍

　　Taylor 从 13 岁起便开始自学网页设计，iPhone 问世后开始接触UI设计，因此是前端及设计双栖的产品设计师。学生时期曾在 Yahoo 实习，其后分别在外商及台湾新创公司带领 Web、iOS、Android 设计团队，及担任UI、用户体验讲师。

　　他的Facebook：https://fb.com/chihyueh.hu