CSS中的長度機關

CSS中的機關

提及機關，我們并不陌生，在寫網頁時，用到CSS來設定元素樣式時都會用到，最常用的機關是px（像素）。CSS中機關有很多，可以分為絕對長度機關和相對長度機關兩種。

絕對長度機關

絕對長度機關是一個固定的值，它反應一個真實的實體尺寸。絕對長度機關視輸出媒體而定，不依賴于環境（顯示器、分辨率、作業系統等）

機關	描述資訊
cm，mm	厘米，毫米
in	英寸 (1in = 96px = 2.54cm)
px	像素 (1px = 1/96th of 1in) ，
pt	列印機關。point，大約1/72英寸； (1pt = 1/72in)
pc	pica，大約6pt，1/6英寸； (1pc = 12 pt)

注：像素px或許被認為是最好的"裝置像素"，而這種像素長度和你在顯示器上看到的文字螢幕像素無關。px實際上是一個按角度度量的機關。px也被認為是相對機關。

詳解參見px是絕對機關還是相對機關。

相對長度機關

相對長度機關指定了一個長度相對于另一個長度的屬性。對于不同的裝置相對長度更适用。

機關	描述資訊
em	描述相對于應用在目前元素的字型尺寸，是以它是相對長度機關。一般浏覽器（以chrome為例）字型大小預設為16px，是以浏覽器未經調整時，認為1em == 16px；
ex	依賴于英文字母小寫 x 的高度
ch	數字 0 的寬度
rem	root em，根元素（html）的 字型大小，比較常用。使用rem為機關設定字型大小時，是相對于HTML根元素的大 小，可通過該根元素就成比例的修改調整所有字型大小，一般用的時候都是寫在body或html上面，
vw	viewpoint width，視窗的最大寬度，1vw=視窗寬度的1%
vh	viewpoint height，視窗的最大高度，1vh=視窗高度的1%
vm	vmin，也即相對vw或vh中較小的那個 ，相對于視口的寬度或高度中較小的那個。其中最小的那個被均分為100機關的vmin（即vm）。
vmax	vw和vh中較大的那個

注意: Internet Explorer 9 通過不标準的名稱 vm 來支援 vmin 。