W3.org对各长度单位的详细阐述（译文）

原文：https://www.w3.org/Style/Examples/007/units.en.html

EM，PX，PT，CM，IN….

---

CSS提供了一些表示长度的单位，其中一些时间比较久的单位来自印刷排版界，比如point(pt) 和 pica(pc),还有我们每天都会用到的、广为人知的，比如 centimeter(cm) 和 inch(in)。还有一个由CSS而生的神奇单位：px；那是不是不同的单位使用在不同的属性上呢？

其实不然，单位跟属性没有关系，它跟输出设备密切相关：屏幕和承印物纸张。

表示长度的各单位，是不受限的。如果一个属性可以设置px单位的值（比如margin：5px），那同样也可以设置成 inches或centimeters（比如margin:1.2in;marign:0.5cm），反之依然。

但一般来讲，在屏幕输出 和打印输出上，你会用到不同套的单位，具体使用情况推荐如下：

绝对单位的关系： 1in = 2.54cm = 25.4mm = 72pt = 6pc

译者案：上为截图 高度为72pt的框，作者的意思是让你测量在不同设备下的高度变化，如需测量请在原文中（因为是绝对高度，所以不同设备下的高度，尺子量出来都是一样的），代码如下：

<span style="display: block; height: 72pt; border-width: 1px; border-style: solid dashed; line-height: 24pt; font-size: 19pt; text-align: center; margin: 1.2em">↑<br>72pt<br>↓</span>

在 CSS里，所谓的绝对单位（cm,mm,in,pt和pc）意味着不管在什么场景下所代表的长度都是一致的，当然，还有个前提是你的输出设备要有足够的分辨率；对于激光打印机，1cm(css)就是精确的1cm（物理）。但是在低分辨率设备下，比如电脑显示屏，CSS就不会要求这么精确；实际上，精确度会随着设备和CSS解析的不同而有所差异；绝对单位是为高分辨率设备，特别是打印输出设备而制定。在电脑端和手持设备上，绝对单位就可能不会像你期望的那么精确。

早些时候，CSS要求即便是在电脑端所显示的绝对单位下的信息也要精确的，但是随着不精确的展现情况远多于精确的，并且这种境况并没有得到改善，CSS在2011年摒弃了这个严格要求；目前，只在印刷输出和高分辨率设备下，有严格的绝对单位精确度要求。
CSS并没有定义高分辨率的含义，但对低端打印机，高分辨率目前来讲起点是300dpi,高端屏幕起点是200dpi,或许高分辨率的界点就在这两个参数间。

em和ex单位基于字体font，并有可能在同一document下的不同元素内不一样；em就是其元素字体大小font size。对于字体大小为2in的元素，1em等于2in。例如margins和paddings属性的尺寸描述，用em就意味着跟字体有关联，如果用户分别在大字体（eg:大屏幕）和小字体（eg:手持设备）下，margins和paddings的大小就很相称。在CSS 声明如text-indent:1.5em 和 margin：1em是比较常见的。

ex单位很少用。它的意义在于表示一个跟字体x-height关联的尺寸。x-height 大致上等同于小写字母的高，像a,c,m,和o等。相同尺寸的字体（em相同）在小写字体下尺寸就很不可控；但对于一些图片来讲，匹配x-height的情形，ex单位就比较适合。

在CSS中，px 是一个很棒的单位，它跟当前字体大小无关，也无关于物理的厘米单位和英寸单位；px的定义是最小的可见点，比方水平方向的1px宽的线呈现出一个尖锐的边缘（非高保真下）；怎样尖锐、小、可见取决于设备和使用方式：是否想手机一样，很靠近眼睛，像电脑一样，大概一臂之长的位置，或者两者之间的距离，像电子书；px就是这样不是具体的常量，而是取决于设备类型和对应的使用方式。

想理解px的具体概念，设想下90年代的CTR电脑显示器：其最小的显示点位可以展示的长度是1inch 下的1/100或更小；px名的由来就是来自屏幕的pixels。

至今，已有很多设备原则上讲已经可以显示更小的点（你需要用放大镜才可以看到）；但是从上个世纪以来，在各种设备下，document中使用的CSS px单位已经看起来很一样了，特别是在打印机端，可以展示比1px更加细致的信息，但即便在这种情况下，打印机出的1px的线条也跟电脑屏显无异了。设备更变，但px单位下的视觉显现常一致。

事实上，CSS要求在所有的打印输出端1px精确到1inch的1/96，因为考虑到打印机不像屏幕一样需要不同的尺寸来表示px来显示尖锐的线条。在打印媒介中，不仅需要在不同设备间有相同得显示效果，还要确确实实的表示相同的大小（就像上面讲到的cm,pt,mm,in和pc）

CSS同时也定义了默认情况下光栅图片（如照片）的1 image pixels 映射为1px；一张600*400分辨率的照片就等于600px宽乘400px高；照片的piexls并不是映射为设备的pixels（很小的点位），而是映射为px单位；只要在样式类中使用px而非pt,cm等，就可以将图片比较精确地排列在document其他元素中。
译者案：可以理解为照片的piexls映射为逻辑像素点，非物理像素点。

为字体设置em或px

CSS从印刷样式上继承了pt(point)和pc(pica)。打印机上使用这些单位或相似的单位去表现cm或in，有其传统性。所以在CSS中也就顺理成章的使用pt,或者其他你喜欢的单位。但仅使用em和px 而不去使用pt或其他的绝对单位是有个不错的理由的。

下面有几个不同粗细的线条，或许部分或全部看起来比较尖锐，但至少1px和2px的线应该是尖锐和可见的：

译者案：上为截图，看效果的话请在原文中查看。

如果前四个显示一样（或第一条线不显示），你所查看的电脑显示器端最小的物理像素点不会小于1px；如果这些线条厚度呈现递增，那你所观察的显示端应该是个高分辨率电脑屏或者打印在纸张后的显示，如果1pt比1.5px厚点，那你可能是在手持设备上查看的。

这个神奇的CSS单位px，很好使，尤其是在文本跟图片样式对齐，或简单的需要保证呈现1px 或者几倍的px尖锐线条时。

但对于font sizes，还是使用em或更好些，原因有二：1，不用设置body（HTML中）的font sizes，而直接采用设备默认的大小，因为这个大小给读者很舒服的视觉感受；2，用em设置其他元素的font sizes，比如H1{font-size:2.5em}，这样H1就是body的字体正常大小的2.5倍。
译者案：注意，em参考的是自身字体大小，如果自身字体大小没有设定，向上继承父级元素的字体大小！！！

使用px这个单位，你就可以不必知道设备分辨率，输出的是否是96dpi,100dpi,220dpi,或1800dpi,做为一个整数px的显示很好，并且跨平台差异无几。但如果你确实想知道设备的分辨率，又比如想知道0.5px的线条是否可以安全输出？这个就可以通过媒体查询技术来检测其分辨率，解释媒体查询超出了本文的范畴，但可以下面的例子中窥探一斑：

div.mybox { border: 2px solid }
@media (min-resolution: 2dppx) {
  /* Media with 2 or more dots per px */
  div.mybox { border: 1.5px solid }
}

CSS中的其他单位

为了更容易仅基于默认font size来书写样式，从2013，CSS开始引入新的单位：rem。rem（意思是root em）也就是document根目录字体大小。不像em，每一个元素或许有不同的大小，rem自始至终整个document都是一个常量。eg:

p { margin-left: 1em } 
h1 { font-size: 3em; margin-left: 0.333em }

rem单位下：

p { margin-left: 1rem }
h1 { font-size: 3em; margin-left: 1rem }

译者案：解释下为什么用em单位时，margin-left p的是1em,h1 的是0.333em；上面我也说了，em是参考的自身字体大小，如果没有，向上继承，所以p元素的font size没有设定，就是父元素的1em,h1的字体大小设定了3em,所以想要两个元素的margin-left相同，设定h1的margin-left就要缩小三倍。

另外一组旨在跟用户的设备窗口有关联的新单位，vw和vh,vw就是窗口1/100宽，vh就是窗口1/100高，还有一个单位vmin,vmin是筛选vw和vh中较小的那个，反之vmax,你应该可以猜到什么意思。
因为这些是新的单位， 并不是所有的地方都可以有效使用，从2015年早些时候，已经有部分浏览器支持这些新单位了。

---

关于文章：
首次创建于2010.01.10
最近修改于2016.9.30 周五 上午5：20:31 UTC
作者：Bert Bos,style activity lead
译文：Simon
Copyright© 1994-2016 W3C®