CSS 长度单位
原文： https://hacks.mozilla.org/2013/09/css-length-explained/
中文：http://yukun.im/news/469
大家都知道 CSS中的 英寸（in）在屏幕上并不是真正的英寸， 1像素（px）也不是真的1像素，你知道这些CSS单位是怎样在屏幕中展示的吗？
工业上的1英寸 = 2.54 厘米 = 0.0254 米
设备像素
电脑屏幕上显示东西，以像素为单位。显示屏上可以显示全部颜色的一个物理“光点”，在本文中称为“设备像素”（区别与CSS中的“像素”）
DPI，每英寸点数（dots per inch）；PPI，每英寸像素（pixels per inch）
一个设备上的“设备像素”来自于制造商给出的像素密度（单位是 DPI 或者 PPI），DPI 最常用，但是 PPI 更准确。大多数液晶显示器上显示一像素的所有颜色，需要红绿蓝三个点，有些显示器为了节省空间或者增加有效像素密度，像素之间还会共享点。
CSS像素（px）
一个CSS像素的尺寸是一个肉眼可以比较舒适的看出来的点，没有小到需要眯眼睛，也不会大到可以看清像素内结构。（眼睛看到的大小，取决于可视角度。而可视角度取决于物体的实际大小以及物体与眼睛的距离。10米远处一个1米见方的东西，与1米远处的10厘米见方的东西，看上去的大小差不多是一样的，所谓一叶障目不见泰山，讲的就是这个常识。 ）W3C CSS 规范根据视角定义了“参考像素”
1参考像素即为从一臂之遥看解析度为96DPI的设备输出（即1英寸96点）时，1点（即1/96英寸）的视角。
请注意这个差别——CSS规范定义的参考像素并不是1/96英寸，而是1/96英寸在一臂之遥的看起来的视角。通常认为常人臂长为28英寸，所以其视角可以计算出来是0.0213度。（即(1/96)in / (28in * 2 * PI / 360deg) ）
上图中，左边的屏幕（可以认为是电脑屏幕）的典型视觉距离是71厘米即28英寸，其1px对应了0.28mm；
而右边的屏幕（可以认为是你的42寸高清电视）的典型视觉距离是3.5米即120英寸，其1px对应1.3mm。42寸的1080p电视，分辨率是1920*1080，则其物理像素只有0.5mm左右，可见确实是高清哦。
96dpi是参考20世纪的标准，21世纪的常用设备上有不同参考建议
综上，px是一个相对单位，而且在特定设备上总是一个近似值（原则是尽量接近参考像素）。
CSS英寸（in）
在电脑显示器上，CSS英寸与实际的英寸没有关系， 而是等于 96 CSS像素。这样就造成一个尴尬，不能用 CSS 单位在显示器上画出一个准确的尺子，CSS单位是为了在不同的设备上都让用户感到舒适。
不过真的需要尺子的话，可以打印到纸上，打印机会把CSS英寸映射为正确的物理尺寸（打印机要关闭缩放选项）。
设备像素比，DPPX（Device pixel ratio）
时下许多智能手机都有高密度显示屏。为了确保CSS像素大小一致，需要将多个设备像素映射到一个CSS像素。DPPX 就是 CSS 像素与设备像素的比例。
用 iPhone4 举个例子，它有 326 DPI 显示屏，根据上表，智能手机的典型观看距离大概16.8英寸，基准像素为 160 DPI。所以要显示一个 CSS 像素，苹果选择将像素比设置为2，所以看起来就和 163 DPI 手机中显示的一样了。
看上面的数字，为什么不做的更好，把像素比设置为 326/160 = 2.0375，做一个与参考像素完全相同的尺寸。 事实上，这样的比率将导致更严重的后果，每个 CSS 像素都不是用一个完整的设备像素显示，一些图片，边框都需要完整的像素才能正确显示，不然看起来会发虚。还有，163 DPI 正好是上一代的 iPhone 的像素密度。
CSS point（pt）
点是一种印刷行业中常用的单位，继承自活字印刷中的单位，当这个行业进化到用桌面排版后，pt 被重新定义为 1/72 英寸。 CSS 遵循了相同的约定，映射 1pt = 1/72 * 1in = 96/72 CSS像素
所以 pt 和其他传统单位一样，必须打印出来才和物理单位一致。
CSS PICA（PC），CSS厘米（cm），CSS毫米（mm）
与英寸（in）类似，同时保持相对关系。
viewport meta标签
虽然智能手机可以很方便的在手掌上显示让眼睛舒适的大小，但是固定宽度的网站，不能只显示一部分，也不能不顾 CSS 规则显示成别的样式（貌似很多手机浏览器会重新排版……）
viewport 标签解决了这个问题，可以让开发人员控制在桌面版显示完整版，手机上显示缩放后的页面。
总结
浏览器常上在竞争的同时，也意识到努力保持稳定的Web平台，通过一个标准组织协调功能集。新的特性和 API 在所有场景中都测试后才宣布其作为一个标准。 CSS 像素的定义，从一开始就是这样的。新的特性必须保持向后兼容，而不是改变旧的行为（咳咳，xHTML，呵呵），所以很多特性（设备像素，viewport 标签等）都是作为新的内容加入，旧页面就会忽略这些特性，自动有了“向后兼容”的能力。
参考链接：
A quick PSA on “dots” versus “pixels” in LCDs
http://techcrunch.com/2010/07/21/a-quick-psa-on-dots-versus-pixels-in-lcds/
CSS 长度单位
http://www.w3.org/TR/CSS2/syndata.html#length-units
像素（px）到底是个什么单位
http://hax.iteye.com/blog/374323
1996 W3C CSS 像素定义
http://www.w3.org/TR/REC-CSS1-961217#length-units