对ios和web开发中有关pt,px的一点思考

3,686 阅读5分钟

文章适合对设备像素,设备独立像素,pt等概念有一定了解的人,有些基本概念,没有过多的强调和解释

文章只是写出了我在翻阅了很多资料之后,自己写的一些理解,不一定百分百准确,还希望大家指教

思考一、不得不说的iPhone历史

在iPhone还处于2G,3G,3GS时代(非retina屏幕时代)的时候,设计师在设计UI的时候,只需要按照屏幕设备像素320px*480px(注意这里的px含义指的是设备像素,可参考文末解释)1:1来设计。之后iPhone4的划时代出现,打破了这种局面。苹果把iPhone4设备的分辨率变成了640px**960px,然而屏幕物理尺寸却没改变,导致屏幕的像素密度PPI(PPI和DPI可以参考文末解释)翻了一倍。意味着同样的空间,像素数量变成了原来的四倍,如下图所示。

webp _1_.jpg

但是所有原来的旧应用的图形必须在更搞PPI的iPhone上以相同的大小绘制。如果iPhone像原来一样以1:1比例绘制所有图形,则所有内容都将以新屏幕大小的四分之一绘制-从而使每个旧应用都显示错误。为了防止所有这些应用程序无法正常工作,Apple开始使用点(point,简写pt)作为图形绘制的基本点和让图形绘制和其所在的屏幕密度分开的一种方式。个人理解这里的point不能里理解成印刷行业的pt单位,印刷行业的1pt = 1/72英寸,这里的point也是一个绝对单位。我们应该理解成,苹果人为规定在非retina屏幕上,1pt = 1px,iPhone4,5,6屏幕上1pt = 2px,iPhone6+,iPhonex屏幕上1pt = 3px。这样一个1point *1point的空间在iPhone4,5,6屏幕能显示2px *2px的空间,我们只需要准备好相应的二倍图资源,就能高清正确显示,三倍图同理。

思考二、web开发中,pt单位是一个绝对单位等于1/72英寸。我们可以在浏览器中进行换算12pt等于多少px,这里的px是css像素(也叫做设备独立像素,设备像素比=设备像素/设备独立像素),并不是我们上面提到的设备像素。

12pt = 12*1/72 = 0.1666667英寸,然后根据当前环境的 DPI/PPI 参数来决定这 0.1666667 英寸 应该输出到显示器为多少像素

在桌面设备(Windows,MacOS)移动端(IOS,Android)浏览器显示都采用96PPI来计算0.1666667英寸应该用多少像素来显示:

0.166667*96 = 16px。所在在web,12pt的字体大小=16px的字体大小。

这里有几点需要注意

1、css像素是一种w3c提出的参考像素

2、web中的pt和ios原生开发中的pt含义不一样。web中的1pt=1/72英寸

3、很多资料都说Windows采用的是96PPI,MacOs采用的是72DPI。实际测试,现在MacOs已经改成了96PPI。应该是为了统一。

4、可能大家通过计算自己的屏幕发现PPI并不一定等于96PPI,这里是由于历史原因,系统在计算的时候,默认都采用了96PPI,感兴趣的同学可以自行去查阅资料。

DPI和PPI傻傻分不清楚

此处参考了知乎梁海的回答:(www.zhihu.com/question/19…) 关于「pt」这个单位:全称「point」,中译「点」(Microsoft Office 里译为「磅」)。这是一个物理单位,它描述的是一段实际的长度,常用于字体排印(typography)与平面设计,比如设定字号和行高。今天的通用标准是 1 pt = 1/72 inch(1 inch = 2.54 cm),这个标准又称「PostScript point」。我们使用 point 时就是希望直接控制输出图形的实际大小(一般是通过印刷)。Point 和厘米、毫米什么的单位没有本质区别,只是长度不同。为避免混淆,下文提到「point」时我都直接写英文,不写中译。

关于「dot」:「DPI」这个单位中的「dot」一般也翻译为「点」,但此点(dot)非彼点(上文point)。Dot 指的是采样或输出的最小单位,它很抽象,在不同的设备里会和不同的具体事物关联起来。比如:扫描仪的 dot 就是它能扫描(采样)出的最小一点色彩信息,这些采样点集合起来然后转换为对应的像素,一般不是一对一的;打印机的 dot 就是它能印出的最小墨点,需要许多个墨点组合起来才能表现出数字图片中的一个(虚拟的)像素;而有时我们用 DPI 来描述显示器时,dot 就是显示器的物理像素(实际的像素)。

关于「DPI」与「PPI」这一对常用单位:「DPI(dots per inch)」描述的是每英寸有多少个采样点;而「PPI(pixels per inch)」描述的是每英寸有多少个像素。因为对于数字图片来说,采样点就是像素,于是在电脑里 DPI 和 PPI 经常混用,这造成了一些混淆,但它们的目的都是把虚拟的点/像素和实际的尺寸联系起来(比如我们常用 72 PPI、150 PPI 或 300 PPI)。

设备像素

设备像素(通常也说成物理像素)是个物理概念,通常我们也说成是屏幕分辨率。比如iPhone6的屏幕分辨率是750px*1334px。代表的是屏幕在水平方向有750个像素,竖直方向有1334个像素。实际上每个像素是由三个分别呈现红绿蓝的子像素(sub_pixel)组成。如下图所示:

1.jpg
从图中可以看到,显示器屏幕实际上是由一个一个"点"组成的(每个"点"又包含3个单位,也称三元素组),这些"点"就是设备像素。需要注意的是分辨率实际是可以"变化"的,当你降低设备分辨率时,一个"点"就需要更多的三元素组来组成,此时"点"的物理尺寸就增大了。所以我们可以在Windows设备上,降低屏幕分辨率的时候,图片、图标都会变大