CSS 單位
CSS 單位
CSS 有幾種不同的單位可以用來表示長度。
許多 CSS 屬性都接受“長度”值，例如 width、margin、padding、font-size 等。
長度 是一個數字後跟一個長度單位，例如 10px、2em 等。
注意： 數字和單位之間不能有空格。但是，如果值為 0，則可以省略單位。
對於某些 CSS 屬性，允許使用負長度。
長度單位有兩種：絕對單位和相對單位。
絕對長度單位
絕對長度單位是固定的，用任何這些單位表示的長度都將顯示為確切的尺寸。
不推薦在螢幕上使用絕對長度單位，因為螢幕尺寸差異很大。但是，如果輸出媒介已知（例如用於列印佈局），則可以使用它們。
| Unit | 描述 |
|---|---|
| 釐米 | 釐米 嘗試 |
| 毫米 | 毫米 嘗試 |
| in | 英寸 (1英寸 = 96px = 2.54釐米) 嘗試 |
| px * | 畫素 (1px = 1/96 英寸) 嘗試 |
| pt | 點 (1pt = 1/72 英寸) 嘗試 |
| pc | 派卡 (1pc = 12 pt) 嘗試 |
* 畫素 (px) 相對於觀看裝置。對於低解析度裝置，1px 是顯示器的 1 個裝置畫素（點）。對於印表機和高解析度螢幕，1px 表示多個裝置畫素。
相對長度單位
相對長度單位指定相對於另一個長度屬性的長度。相對長度單位在不同渲染媒介之間具有更好的可伸縮性。
| Unit | 描述 | |
|---|---|---|
| em | 相對於元素的 font-size (2em 表示當前字號的 2 倍) |
試一試 |
| ex | 相對於當前字型的 x 字高 (很少使用) | 試一試 |
| ch | 相對於“0”（零）的寬度 | 試一試 |
| rem | 相對於根元素的 font-size |
試一試 |
| vw | 相對於視口*寬度的 1% | 試一試 |
| vh | 相對於視口*高度的 1% | 試一試 |
| vmin | 相對於視口*較小尺寸的 1% | 試一試 |
| vmax | 相對於視口*較大尺寸的 1% | 試一試 |
| % | 相對於父元素 | 試一試 |
提示： em 和 rem 單位在建立完美可伸縮的佈局方面非常實用！
* 視口 = 瀏覽器視窗的大小。如果視口寬度為 50 釐米，則 1vw = 0.5 釐米。
瀏覽器支援
表格中的數字表示完全支援該長度單位的第一個瀏覽器版本。
| 長度單位 | |||||
|---|---|---|---|---|---|
| em、ex、%、px、cm、mm、in、pt、pc | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 |
| ch | 27.0 | 9.0 | 1.0 | 7.0 | 20.0 |
| rem | 4.0 | 9.0 | 3.6 | 4.1 | 11.6 |
| vh、vw | 20.0 | 9.0 | 19.0 | 6.0 | 20.0 |
| vmin | 20.0 | 12.0 | 19.0 | 6.0 | 20.0 |
| vmax | 26.0 | 16.0 | 19.0 | 7.0 | 20.0 |
