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的长度单位