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