CSS 單位
了解如何在CSS中使用單位 在CSS中，您每天都會使用單位。它們用於設定長度、填充、邊距、對齊元素等。 像是 px、em、rem 或百分比之類的單位。 它們無所不在。也有一些相對較不熟悉的單位。 Pixels（像素） 最常用的測量單位。一個像素並不實際對應到屏幕上的物理像素，因為這會因設備而變化（考慮高DPI設備與非Retina設備）。 有一個慣例可以使這個單位在設備之間保持一致。 Percentages（百分比） 另一個非常有用的度量單位，百分比允許您以父元素相應屬性的百分比值指定數值。 例子： .parent { width: 400px; } .child { width: 50%; /* = 200px */ } 現實世界的測量單位 我們還有那些從現實世界翻譯而來的測量單位。在屏幕上通常無用，但在打印樣式表中可能很有用。它們是： cm 厘米（相當於37.8像素） mm 毫米（0.1cm） q 厘米的四分之一 in 英寸（相當於96像素） pt 點（1英寸=72點） pc 派卡（1派卡=12點） 相對單位 em 是分配給該元素的 font-size 的值，因此其精確值會在不同元素之間變化。它不會隨著使用的字體而改變，只會隨著字體大小改變。在印刷術中，它測量的是字母 m 的寬度。 rem 與 em 類似，但不是根據當前元素的字體大小變化，而是使用根元素（html）的字體大小。您只需要設置一次該字體大小，rem 將成為整個頁面上的一個一致的單位。 ex 類似於 em，但測量的不是 m 的寬度，而是 x 的高度。它可以根據使用的字體和字體大小而改變。 ch 類似於 ex，只是它測量的是 0（零）的寬度，而不是 x 的高度。 Viewport 單位 vw viewport 寬度單位 表示視口寬度的百分比。50vw 表示視口寬度的50%。 vh viewport 高度單位 表示視口高度的百分比。50vh 表示視口高度的50%。 vmin viewport 最小單位 表示高度或寬度中較小者的百分比。30vmin 是當前寬度或高度的30％，取決於哪個小。 vmax viewport 最大單位 表示高度或寬度中較大者的百分比。30vmax 是當前寬度或高度的30％，取決於哪個大。 分數單位 fr 是分數單位，用於將空間分為分數，主要在 CSS Grid 中使用。