CSS像素(css pixel)及像素单位 例如px pt em

小序

最近在做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。

像素单位

这里只分别列出一个常用的：

绝对(absolute)单位

px

px单位名称为像素，像素（px）是相对于显示器屏幕分辨率而言的，而这种像素长度和你在显示器上看到的文字屏幕像素无关。
而且在特定设备上总是一个近似值（原则是尽量接近参考像素）。
px实际上是一个按角度度量的单位。

相对(relative)单位

em

1em指的是一个字体的大小，它会继承父级元素的字体大小，因此并不是一个固定的值,起初排版度量时是基于当前字体大写字母”M”的尺寸的。

不仅仅是字体，将行距(line-height)，和纵向高度的单位都用em。保证缩放时候的整体性。

em指字体高，任意浏览器的默认字体高都是16px。所以,未经调整的浏览器都符合:1em=16px。那么12px=0.75em,10px=0.625em。

em有如下特点:
1.em的值并不是固定的;
2.em会继承父级元素的字体大小。

em巧用：
中文文章中，一般段首空两格。如果用px作为单位，对12px字体来说需要空出24px，对14px字体来说需要空出28px……这样换算非常不通用。如果用上em单位，这个问题就很好解决了，1个字的大小就是1em，那两个字的大小就是2em。因此，只需这样定义就行了：

p { text-indent: 2em; }

参考资料：

前端工程师需要明白的「像素」 文／阿树（简书作者）
像素（px）到底是个什么单位
CSS的长度单位