CSS中长度单位的困惑

在CSS中，长度的表示可以是相对单位，也可以使绝对单位。相对单位如px, em, ex，%。绝对单位如in, cm, mm, pt, pc。

一般的网页开发人员基本上都忽略了in, cm, mm, pt, pc等绝对单位。甚至em,ex都很少用到。

在想使用实际的长度单位的时候，往往伴随着很多困惑。比如，如果想做一个宽度1inch的div。但做好之后在各个浏览器，各个设备上一看，千差万别。咋破？又如，设计师设计的UI使用的是Photoshop，标出来的长度，用网页的px一做，怎么都看上去比设计师给的图纸小。为什么会这样？

如果想在web上做一个类似photoshop工作区的那样的一个可以支持放大缩小的区域去设计一些web组件。如何来解决单位的问题便成了首先要明确的问题。

首先需要明确的是一个基本问题。一张图的大小应该用什么来表示呢？一般人会不加思索的回答是面积，而且日常中的图大小，一般都指的是面积大小。也就是需要一个具体的长宽。仔细考虑这个问题后，应该知道一张图的大小应该是包含了多少像素。x像素*y像素。

第二个问题，如何显示图片。现在显示的设备有很多，Pc, 手机(各种尺寸)，平板(各种尺寸)。还有打印机。喷绘等等，几乎所有的尺寸都有。同一张图片在各个设备上的显示也不一样。所以产生了第三个问题。

如何来衡量一个显示设备的能力？

有个关键的指标是PPI。用这个指标来衡量设备显示内容的能力。它的意思是单位长度上，这个设备可以显示多少个点。IPhone5 PPI到了320。表示在一英寸的长度上可以显示320个点。人眼也是一个显示设备的话基本上1英寸上250个点以上人类就分辨不出来了。所以视网膜屏的意思是PPI超过250的显示屏。有了这个指标。图片就有了具体的尺寸了。这就是实际的长度和像素之间转换的关键。

这里有个容易混淆的概念是DPI。DPI也表示单位长度的点数。不过这个是印刷商的计量单位。有时候鼠标也说DPI。表示鼠标滑动单位位置指针能跨过的点数，也表示一种精度。打印机打印在纸张上，那么纸张相当于显示屏。所以考虑到纸张的极限。普通纸张像素点之间距离太近的话会相互影响，所以基本上600DPI的图片，达到了普通纸张的极限。没必要再高。

同一个设备上的图片也可以缩放，可以临时改变这个PPI。或者是通过图像缩放算法来实现，不在本次讨论范围。

类似的吧图片换成网页，基本上就可以解决前面css中的长度单位的困惑。主要了解浏览器使用的PPI是多少。

据试验发现，css中的绝对单位，浏览器会在PPI=96的情况下转换成相对单位如像素点。所以在网页开发中使用长度单位的意义不大，反而要时刻想着PPI。在内部计算长度的时候，用户接口的长度除外，这已经是业务的范畴了。

所以程序员和设计人员之间的沟通要建立在同一个PPI的基础上的。如果设计师用photoshop中的PPI72。网页中使用浏览器默认的PPI96，而给用户的习惯是word里面的长度尺寸。如果是这种情况，而且不很清楚PPI这个东西，将会是很痛苦的事情。

而我做的这个在线版的可缩放的视图。那就掌握一个参数PPI。在网页的基础上伪造一个PPI的概念就可以了。方法纲领是在视图内部使用em和%。然后设置最外框的像素长度宽度。和basefontsize。具体实施的时候最好有一个清晰的规划，不要随便放置margin，padding。不好计算%。

总结一下：

• 图片的基本单位是像素。而不是一个长度单位。
• 衡量设备显示图片使用PPI的概念。
• 为消除人的感观差别，最好使用同一种PPI来进行沟通。为了在不同显示器上做适应。那就得规定好每一种PPI.而不是每一个具体的设备。
• css中绝对长度单位的处理方式，有别于人的直观思维。和日常使用的单位之间有一个相对的像素点在做转换。所以才有各个设备下的不同点。