語言

這是一份翻譯。 與 英文版本 相比,它可能包含錯誤或者過時。 翻譯員: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®

Created 12 Jan 2010;
Last updated 2018年01月12日 星期五 20:13:27

語言

關於翻譯