像素（px）到底是个什么单位

px，对于许多网页设计者来说，是最常用的CSS长度单位。然而，1px到底多长，恐怕没有多少人回答得上来。

CSS长度本身有绝对长度和相对长度的区分。

cm、pt之类的都是绝对长度，它们是物理长度——1cm是1/100米，而1米则大约是光在1秒钟内跑过距离的3亿分之一。（至于光速和1秒的精确值到底是多少，请查阅维基百科光速条目和秒条目。）1pt则是1/72英寸，而1英寸换算到公制是2.54cm。

而em、ex，以及百分比，则是相对长度。比如em相对于当前字体大小，百分比则根据属性定义不同有不同涵义，例如margin的值如果是百分比，表示是相对于父元素的width。


然而，px是什么？

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

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

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

按照CSS规范的定义，CSS中的px是一个相对长度，它相对的，是viewing device的分辨率。这个viewing device，通常就是电脑显示器。典型的电脑显示器的分辨率是96DPI，也就是1像素为1/96英寸（实际上，假设我们的显示器分辨率都与物理分辨率一致，而液晶点距其实是0.25mm到0.29mm之间，所以不太可能是正好1/96英寸，而只是接近）。

一般来说，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) ）

我们在使用不同设备输出时，眼睛与设备输出的典型距离是不同的。比如电脑显示器，通常是一臂之距，而看书和纸张时（对应于打印机的设备输出），则通常会更近一些。看电视时则会更远，比如一般建议是电视机屏幕对角线的2.5到3倍长——如果你是个42'彩电，那就差不多是3米远。看电影的话……我就不知道多远了，您自己量吧。

因此，1参考像素：
对于电脑显示器是0.26mm（即1/96英寸）；
对于激光打印机是0.20mm（假设阅读距离通常为55cm，即21英寸）；

而换算时，对于300DPI的打印机（即每个点是1/300英寸），1px通常会四舍五入到3dots，也就是0.25mm左右；而对于600DPI的打印机，则可能四舍五入到5dots，也就是0.21mm。


上图中，左边的屏幕（可以认为是电脑屏幕）的典型视觉距离是71厘米即28英寸，其1px对应了0.28mm；而右边的屏幕（可以认为是你的42寸高清电视）的典型视觉距离是3.5米即120英寸，其1px对应1.3mm。42寸的1080p电视，分辨率是1920*1080，则其物理像素只有0.5mm左右，可见确实是高清哦。

综上，px是一个相对单位，而且在特定设备上总是一个近似值（原则是尽量接近参考像素）。

然而，如果你把绝对单位理解为对输出效果的绝对掌控，事情却大相径庭。就网页输出的最主要对象——电脑屏幕来说，px可被视为一个基准单位——与桌面分辨率一致，如果是液晶屏，则几乎总是与液晶屏物理分辨率一致——也就是说网页设计者设定的1px，就是“最终看到这个网页的用户的显示器上的1个点距”！反倒是那些绝对单位，其实一点也不绝对。

因为绝对单位比如cm或者pt，显示在屏幕上时最后还是要换算为像素，而且这种换算不是按照像素的实际物理长度来换算的（浏览器不用知道，也不可能知道当前这台显示器的1px物理长度到底是多少），而是按照桌面设定的DPI计算的。也就是说，网页设计者指定某个字体是12pt（即1/6英寸或4.2mm），实际上你量量屏幕，几乎不可能是正好12pt，而只是接近12pt的16px（按照96DPI换算）而已。如果你的屏幕点距是0.29mm，则实际上是4.64mm或13.15pt。假如你把桌面改为大字体（120DPI），则最终12pt相当于20px，按照0.29mm点距，最终效果是16.44pt。

过去，建议网页设计者不要使用px，一个原因就是基于用户可以根据自己的需要调节桌面DPI，从而控制绝对长度的实际长度（绕口令啊）。

然而这其实是可疑的。既然绝对长度的实际长度可以根据需要调节，没有理由px这样一个相对长度不能根据需要调节。就好像照片在实际打印时你当然可以根据需要缩放一样，以px设定的字体和图像在实际显示时完全可以进行缩放——这时网页设计者指定的1px就不再对应于用户桌面的1px，而是可能对应1.2px或1.5px或其他值。

过去浏览器的调节字体大小的选项只对绝对长度有效（相当于调节浏览器内部的DPI），对px无效，这只能说是过去浏览器的设计问题，并不是px的固有问题。现在浏览器都已经支持针对以px设定的字体的缩放了。像Firefox，用户还可以选择是单单缩放字体，还是连图片一块儿缩放。所以全部使用px的“像素级精确设计”完全是可行的，也是我认为合理的设计方式。毕竟，CSS中的px本来就是要确保一致的阅读体验。至于是流式布局还是固定布局，是否能适应不同的分辨率，那是另一个话题，与是否使用px作为单位并没有直接关联。

评论

13 楼 wenjixiao 2010-11-11  

wenjixiao 写道

由于dpi可能有所不同，如何取得当前的dpi值呢？

浏览器环境，用javascript。

12 楼 wenjixiao 2010-11-11  

由于dpi可能有所不同，如何取得当前的dpi值呢？

11 楼 hax 2009-09-24  

em是大写X高度这个我倒没听说过。我只知道ex是小写x高度，并且x-height是字体排版中的非常重要的概念。

针对屏幕的浏览器中，网页样式计算出来的最后结果（computed value或used value），都是以px为单位，而且是允许小数的。“半像素平滑”带来的区别，可以认为是在actual value上，原本必须取整，即渲染引擎只支持整数，现在渲染引擎支持了小数——虽然屏幕上的物理像素总是离散的。

你后面说的意思我反复考虑了2个小时，觉得值得深入探讨。你提出的将em用来标示“缩放友好”（实际我觉得是“文字缩放友好，text zoom friendly”，具体我们再讨论）这个问题，不仅涉及页面的设计，也涉及浏览器的设计。它还暗示了引入css新长度单位rem的必要性。有机会和你当面聊，然后再做总结。

10 楼 Tin 2009-09-24  

Hi hax，

上次看到你在我分享的friendfeed上面的评论我就想好好讨论一下这个问题了。'em'是从字体设计上面继承的一个概念，是指字模的高度，一般书上会说em能够保证不同字体的大写X的高度保持一致。那么大写X的高度就是这个字体的em。

你说的px是相对单位不仅在你说的显示器尺寸上是相对的，而且由于大部分的矢量元素的渲染来说比较先进的浏览器都支持“半像素平滑”，连像素内的颜色的投影也可以是相对的（渲染引擎会进行像素平滑的计算）。

在网页渲染的布局上来说它要转化em到px这个单位，就是说在一定的zoom下两者是等价的。

但是为什么我还是很支持使用em作为首选的字体和布局单位呢？当然这不是用来保证一行到底可以显示多少文字，因为px也可以保证。主要目的是区分布局中“缩放友好”的矢量元素（如字体，布局相关的所有html元素）和“缩放不友好”的标量元素（如很多“替换元素”是不友好的，典型的如图片，还有在使用某些Windows主题以后的input元素）。在使用webkit的浏览器，缩放会更加友好，文字和布局会随缩放变化，但是图片等却保持原有的最佳尺寸。Firefox3以后所使用的全部缩放我觉得在有些时候是有用的，可是总有它让你不爽的地方⋯⋯

比如如果你在某些设计场合希望容器变大文字尺寸不变，从而在缩放显示更多内容。另外一些地方你希望容器和文字尺寸一起变化。px和em的配合让两种需求可以比较容易的在同一个页面出现。

从设计为内容服务的角度考虑，使用em作为基本单位可以让你更集中于“内容驱动”，避免过分的”设计驱动“。我的工作范畴内前者更常见，也更符合客户的需求。

9 楼 energykey 2009-05-04  

  有深度

8 楼 jkfzero 2009-04-29  

考究派

7 楼 Army 2009-04-27  

………………

6 楼 yukaizhao 2009-04-27  

从来没有这么细致的了解这个问题 

5 楼 weskycn 2009-04-27  

px 是个相对单位早就听说过,不过一直百思不得其解,呵呵

4 楼 hax 2009-04-27  

诶，凌晨果然脑子不清楚了，光速都给搞错了。。。

3 楼 jindw 2009-04-27  

felixding 写道

过去不提倡用px？我一直都用px，12px，没遇到过什么问题。hax真勤奋啊，凌晨发文章。

据我观察，凌晨是hax最活跃的时候，只有那阵子GTalk显示为在线状态^_^

2 楼 pufan 2009-04-26  

引用

而1米则大约是光在1秒钟内跑过距离的30万分之一

有点小纰漏：光速一秒是30w公里，应该是30*1000=3万万分之一。

1 楼 felixding 2009-04-25  

过去不提倡用px？我一直都用px，12px，没遇到过什么问题。

hax真勤奋啊，凌晨发文章。