语言

这是一份翻译。 与 英文版本 相比,它可能包含错误或者过时。 翻译员:Samuel Chong of Chinese Translation Services through its pro bono translation services

网页样式表 CSS提示以及技巧

请见所有提示的引索

本页有:

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,而不是ptcm等等。

使用empx字体大小

CSS继承了pt(point)单位以及排版学的pc (pica)。比起cmin,传统打印机偏好使用这些单位。在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(或 cmin),如果你需要确定打印出来的字体是某个大小的话。但使用默认字体大小经常还是较好的选择。

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内的单位

要更简单地写出仅根据默认字体大小改变的样式规则,CSS从2013年就有了一个新的单位: remrem(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以及 vhvw是视窗的100分之1的宽度,而vh是视窗100分之1的高度。另外还有vmin,它指的是vw以及 vh间较小的那一方。另外还有vmax。(你可以猜的出它的功能)

因为这些单位非常的心,它们还不是在所有地方都能使用。但是在2015前半年的时间点,已经有数个浏览器是可以支持他们的了。

Bert Bos, style activity lead
Copyright © 1994–2018 W3C® Privacy policy

Created 12 Jan 2010;
Last updated 2018年09月26日 星期三 04时41分20秒

语言

关于翻译