聊一聊CSS中的長度單位

CSS中有不少屬性能夠接受長度值，好比： width, height, margin, padding, border-width, font-size, text-shadow。由於使用場景多，所以CSS也提供了許多長度單位。有的是平常生活中使用的單位，好比：釐米（cm）和英寸（in）；有的是印刷行業使用的單位，好比：point（pt）和pica（pc）；有的是專門爲CSS發明的單位，好比：px。

使用場景

那麼這些屬性和單位怎麼配合使用呢？特定的屬性須要使用特定的單位嗎？其實並不是如此，單位和屬性無關，同一個屬性任何單位都適用，什麼時候使用何種單位是沒有限制的，若是屬性接受以px爲單位的值（好比：margin: 5px），那麼它也能夠接受英寸或釐米（margin: 1.2in; margin: 0.5cm）爲單位的值，反之亦然。

單位雖然和屬性無關，可是和輸出的媒介有必定關係，好比輸出到是屏幕仍是紙張。在屏幕上顯示和在紙張上面打印推薦使用的單位是不同的。下表給出了推薦的使用方法：

輸出媒介	推薦	偶爾使用	不推薦
屏幕	em, px, %	ex	pt, cm, mm, in, pc
打印	em, cm, mm, in, pt, pc, %	px, ex

除了和輸出媒介的關係，這些單位能夠從長度值的計算方式區分爲絕對單位和相對單位。

絕對單位

絕對單位（px，cm， mm，in，Q，pt和pc）意味着以此爲單位的長度值與其表明的物理長度相等，好比width: 1cm即與現實世界中的1cm長度相等，也意味着絕對單位在全部的媒介上的顯示效果是一致的。但這是理想狀況，受顯示器和不一樣瀏覽器CSS實現的差別，在不少設備上絕對單位顯示的並不精確。由於px和in的關係爲1in=96px， 在低分辨率設備上，1px爲1像素（pixel，也是px名稱的由來）長度，而低分辨率的屏幕上1px每每大於1/96in，因此從px計算獲得的其餘絕對單位值都不許確。而在高分辨率設備上（如如今的高清屏和打印機）絕對單位顯示得更精確。因爲以上緣由，絕對單位更多的是在打印時使用。

曾經，CSS要求在計算機屏幕上正確顯示絕對單位。可是因爲大部分廠商並不能實現這一要求，因此CSS在2011年放棄了這一要求。目前，絕對單位僅在打印和高分辨率設備上正常工做。CSS沒有明肯定義「高分辨率」的含義。可是，因爲目前低端打印機的每英寸點數爲300 dpi，而高端屏幕的每英寸點數爲200 dpi，所以所謂的「高分辨率」可能介於二者之間。。

下面貼出絕對單位直接的換算公式：

1in = 2.54cm = 25.4mm = 72pt = 6pc = 96px

px

做爲CSS中最經常使用的單位，關於px仍是有必要多說兩句的。px的特色能夠概括以下：

1. 在低分辨率設備上，1px = 1像素；
2. 在高分辨率設備上，1px = 1/96in，1px不必定等於1像素（好比4.7英寸的iphone上 1px=2像素）；
3. 對於圖片顯示，1px = 1圖片像素，好比：一個600x400分辨率的照片的的CSS寬高即爲600px和400px（在4.7英寸iphone上要用1200x800個像素點顯示）；

相對單位

相對單位意味着長度值是根據其餘長度計算得出的。相對單位又能夠分爲基於字體（font based）和基於視窗（viewport based）的：

Font Based

em, ex

首先說說em和ex，em表明元素的當前字體大小，若是元素的font-size爲2cm，那麼1em即表示2cm。em能夠用於控制尺寸，好比margin: 1em; text-indent:1.5em，此時這些尺寸和元素字體大小相關，所以在大屏幕上（字體尺寸較大）和小屏幕上（字體尺寸較小）會等比縮放，所以em能夠用於響應式的設計。若是em直接用於font-size屬性，如font-size: 2em，則em表示爲父元素字體的大小。

ex不多被使用，ex表現的大小與字體的x-height相關。x-height大體等於字體中小寫字母（例如a，c，m或o）的高度。相同font-size的不一樣字體的x-height可能會有很大的差異，因此使用ex產生的效果存在很大的不肯定性。

rem

CSS在2013年創造出了一個新的單位rem，rem表示的是根元素（html元素的）字體大小，在每一個元素裏面em均可能不同，可是rem都是一致的。由於這一特性，rem如今被更普遍的應用於響應式設計。

ch

ch用的表較少，是CSS3中新加入的單位，表示當前字體中的 "0" (零、unicode 字符 U+0030) 的寬度。

Viewport Based

vw，wh，vmin，vmax

都是CSS3中新加入的單位。vw，vh能夠根據視窗大小調整字體大小。vw是視窗的1/100的寬度，而vh是視窗1/100的高度。此外還有vmin，它指的是vw以及vh間較小的那個，與之相對的還有vmax。這些單位在目前大部分瀏覽器上都有支持。