CSS像素(css piel)及像素单位例如p pt em

2016-05-15 11:38:00

小序

最近在做pc端、微信端、移动端app,公司的每个项目分别都有这三者，在pc端调试页面，像素显示都和预期效果的一样，可是，微信页面和手机页面却天差地别，在goole里调试得好好的，结果，真机看效果，用同事们的手机有不同的显示效果，于是，对于像素单位有了兴趣，近来，根据自己查到的资料，做一个总结。

像素(pixel)概念

一般而言，pixel（像素）是图像的基本采样单位。详细解释见维基像素条目。所以它不是一个确定的物理量，也不是一个具体的点或者小方块（尽管可以用点和小方块来呈现），而是一个抽象概念。

CSS像素(css pixel)

CSS像素是Web编程的概念，指的是CSS样式代码中使用的逻辑像素。
在CSS规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位。

按照CSS规范的定义，CSS中的px是一个相对长度，它相对的，是viewing device的分辨率。

设备像素(device pixel):

设备像素设是物理概念，指的是设备中使用的物理像素。
不同的设备，其图像基本单位是不同的，比如显示器的点距，可以认为是显示器的物理像素。现在的液晶显示器的点距一般在0.25mm到0.29mm之间。而打印机的墨点，也可以认为是打印机的物理像素，300DPI就是0.085mm，600DPI就是0.042mm。

我们通常所说的显示器分辨率，其实是指桌面设定的分辨率，而不是显示器的物理分辨率。只不过现在液晶显示器成为主流，由于液晶的显示原理与CRT不同，只有在桌面分辨率与物理分辨率一致的情况下，显示效果最佳，所以现在我们的桌面分辨率几乎总是与显示器的物理分辨率一致了。

设备像素与CSS像素之间的换算

一般来说，px就是对应设备的物理像素，然而如果输出设备的解析度与电脑显示器大不相同，输出效果就会有问题。例如打印机输出到纸张上，其解析度比电脑屏幕要高许多，如果不缩放，直接使用设备的物理像素，那电脑上的照片由600DPI的打印机打出来就比用显示器看小了约6倍。

所以，CSS规定，在这种情况下，浏览器应该对像素值进行缩放调节，以保持阅读体验的大体一致。也就是要保持一定像素的长度在不同设备输出上看上去的大小总是差不多。直接按照设备物理像素的大小进行换算当然是一个方式，但是CSS考虑得更多，它建议，转换应按照“参考像素”（reference pixel）来进行。

眼睛看到的大小，取决于可视角度。而可视角度取决于物体的实际大小以及物体与眼睛的距离。10米远处一个1米见方的东西，与1米远处的10厘米见方的东西，看上去的大小差不多是一样的，所谓一叶障目不见泰山，讲的就是这个常识。

因此CSS规范使用视角来定义“参考像素”，1 参考像素即为从一臂之遥看解析度为96DPI的设备输出（即1英寸96点）时，1点（即1/96英寸）的视角。

请注意这个差别——CSS规范定义的参考像素并不是1/96英寸，而是1/96英寸在一臂之遥的看起来的视角。通常认为常人臂长为28英寸，所以其视角可以计算出来是0.0213度。（即(1/96)in / (28in 2 PI / 360deg) ）

我们在使用不同设备输出时，眼睛与设备输出的典型距离是不同的。比如iPhone 5使用的是Retina视网膜屏幕，使用2px x 2px的 device pixel 代表 1px x 1px 的 css pixel，所以设备像素数为640 x 1136px，而CSS逻辑像素数为320 x 568px。