Bert
Bos,style activity leadCopyright ©1994–2022 W3C®Privacy policy
Created 12 Jan 2010;
Last updated2022年02月10日 星期四 05时40分52秒
这是一份翻译。与英文版本相比，它可能包含错误或者过时。翻译员:Samuel Chong of Chinese Translation Services through its pro bono translation services
em, px, pt,cm, in…CSS提供数种表达长度的不同单位。有些在排版史是有资历的，例如point (pt)以及pica
(pc)，其它也有日常生活常见的，例如厘米 (cm)以及英寸(in)。另外，有一个"魔法"的单位是专为CSS所发明的:px。这代表了不同的性质和单位吗?
不是。这单位与性质无关，但它与输出媒体有关: 屏幕或纸张。
哪个单位在哪里使用并没有限制。如果有个性质接受px (幅度: 5px)的数值的话，它也将接受英寸或厘米的数值(幅度: 1.2英寸;幅度: 0.5厘米)。
但一般来说，你会使用不同的单位来在屏幕上显示或在纸上打印。以下表格提供了推荐的用法:
| 推荐 | 偶尔使用 | 不推荐 | |
|---|---|---|---|
| 屏幕 | em, px, % | ex | pt, cm, mm, in, pc |
| 打印 | em, cm, mm, in, pt, pc, % | px, ex |
绝对单位之间的关系如下: 1in = 2.54cm= 25.4mm = 72pt = 6pc
如果你手上有量尺，你就以测量你的设备有多精确:这是高度为1in的方格 (2.54cm): ↑
72pt
↓
所谓的绝对单位 (cm,mm, in, pt and pc)
在CSS内与任何其它地方的意思都一样， 前提是你的输出装置的分辨率够高。在镭射打印机上，
1cm应为准确的1厘米。但在低分辨率的装置上(如电脑屏幕)，CSS不需要该精确度。
确实，在不同的装置或不同的CSS上，常会有不同的结果。这些单位最好是在高分辨率的装置或打印机上使用。在电脑屏幕以及手持装置上，你可能得不到你所期望的结果。
在过去，即使在电脑屏幕上，CSS也需要正确显示出绝对单位。但是随着不正确显示渐渐多于正确显示，状况并无改善，CSS便在2011年放弃了该需求。目前绝对单位只需要打印机或高分辨率装置上正确显示。
CSS并无定义什么为"高分辨率"。但是因低端打印机分辨率最低也有300 dpi，而高端屏幕则是200dpi，界线应该是这中间。
除打印以外，还有另一个理由是应避免使用绝对单位的:
你在看不同的屏幕时距离也不同。在桌上电脑的屏幕上1厘里看起来很小，但在行动装置上看起来则很大。
最好是能够使用相对性单位，例如em。
em以及ex单位依据字体在文件中的不同元素上有所不同。em仅仅是字体大小。在2英寸的元素中1em就是2英寸。 利用em表达大小的话，就代表它们是与字体大小相关。如果使用者有较大的字体(例如在大屏幕上)，或者是较小的字体(例如手持装置)，它的大小会保持比例。
以下编码text-indent: 1.5em以及margin: 1em在CSS里是非常常见的。
单位ex很少被使用。它的目的是表达必须与字体的x-高度有关的大小。x-高度大致是指小写字母的高度，例如a, c, m,或者o。 有一样大小的字体(所以也有一样的em)可能在它们的小写字母大小上有较大的不同，而当有些图象必须要符合x-高度时，ex单位是可以使用的。
px单位是CSS的魔法单位。它与当下字体无关，并且通常与实际的厘米或英寸也无关。px是被定义为小但仍可见，并且水平向的1px宽的线可以清晰地显示出来的单位(无抗锯齿)。
怎么样才是清晰，小，可见则是根据装置及其使用方法有所不同: 你是否将其放在离眼镜近的距离，像是手机一样?
又或者像是电脑屏幕一样中间有手臂宽的距离? 又或是向电子书一样在两者中间? px
并不是一个不变的距离，它根据装置种类及其使用方法有所不同。
若想大致理解px看起来如何，请想象一个90年代的CRT电脑屏幕:
它可以显示出的最小点是差不多百分之一英寸 (0.25毫米)，或稍微再大一点。px的名称就是从这些屏幕像素来的。
近来有些装置可以显示更小的清晰的点(虽然你可能需要放大镜才看得到)。但是使用CCS内的px的上世纪的文件不管在什么装置上看起来仍然一样。特别在打印机上，它可以显示出比1px小很多的线条。但即使是在打印机上，1px的线条看起来仍与电脑屏幕上非常相似。装置会改变，但px一直都有一样的外观。
其实，CSS要求1px在所有打印结果上，完全符合96分之1英寸的大小。与屏幕不同，CSS将打印机视为不需为了px有不同的的大小以打印出清晰的线条。在打印媒体上，px不只在不同装置上有一样的外观，量起来也是一样的。
CSS另外将光栅图像(如照片等)的显示方式定义为默认每一个图像大小为1px。
一个600x400解析度的照片的长宽分别为600px以及400px。所以照片本身的像素并不会与显示装置像素(可能非常小)一致，而是与px单位一致。如此就可以将图像完整的与文件的其它元素排列起来。只要你使用的单位是px，而不是pt，cm等等。
em或px字体大小CSS继承了pt(point)单位以及排版学的pc
(pica)。比起cm或in，传统打印机偏好使用这些单位。在CSS内，我们并没有理由使用pt，所以可以使用任何你喜好的单位。但是确实有理由避免使用pt或其它绝对单位并且只使用em以及 px。
以下为几条不同粗细的字体。部份或者全部的字体看起来可能是清晰的。但至少1px及2px这两条会是清晰请可见的:
0.5pt, 1px, 1pt, 1.5px,2px
如果前四条看起来一样(或者看不到0.5pt那一条)，你可能在使用无法显示小于1px的屏幕。如果字体愈来愈粗，你可能是在高质量的屏幕或者纸张上阅读。如果1pt看起来比1.5px粗，你可能在使用手持装置。
CSS的魔法单位px常常是用好用的单位。特别当你需要将文字与图像排列在一起时，或者只是需要确保任何1px的物件看起来清晰时。
但在字体上，如果能使用em那将会更好。只要是因为(1)不设定本文字体大小(HTML内)，而是使用装置本身的默认大小，如此一来读者可以舒适地阅读；(2)用em表达其它元素的字体大小: H1 {font-size: 2.5em}可将H1设为正常本文大小的2.5倍。
只有在要打印出来的样式表内才能使用pt(或cm或in)，如果你需要确定打印出来的字体是某个大小的话。但使用默认字体大小经常还是较好的选择。
px去除了你知道装置解析度的需要。无论其输出是96 dpi，100 dpi，220
dpi或1800 dpi，整数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从2013年就有了一个新的单位: rem。rem(em的"根(root)")是文件的根元素的字体大小。与在每个元素里都可能不一样的em不同，rem在整份文件中都是一致的。例如，若要给P以及H1元素一样的左边距，请比较以下2013年之前的样式表:
p { margin-left: 1em }
h1 { font-size: 3em; margin-left: 0.333em }
以及新的版本:
p { margin-left: 1rem }
h1 { font-size: 3em; margin-left: 1rem }
另外的新单位可以根据用户的视窗大小调整字体大小。它们分别为vw以及vh。vw是视窗的100分之1的宽度，而vh是视窗100分之1的高度。另外还有vmin，它指的是vw以及vh间较小的那一方。另外还有vmax。(你可以猜的出它的功能)
因为这些单位非常的心，它们还不是在所有地方都能使用。但是在2015前半年的时间点，已经有数个浏览器是可以支持他们的了。
Bert
Bos,style activity leadCreated 12 Jan 2010;
Last updated2022年02月10日 星期四 05时40分52秒