CSS - 單位

CSS 單位定義用於指定值的測量系統。CSS 提供了許多不同的單位來表示長度和測量。CSS 單位用於指定頁面元素或其內容的屬性大小。

在 CSS 中，有多種方法可以指定和測量長度。它用於指定邊距、內邊距、字型大小、寬度、高度、邊框等。

例如 - **font-size: 50px**，這裡的數字 **50** 字尾為 **px**，即 **畫素**，它是一個 CSS 測量單位。

數字和單位之間不應有空格。當值為 0 時，可以省略單位。

長度單位

長度單位可以分為兩種型別

**絕對單位：** 固定長度單位，不依賴於螢幕寬度。
**相對單位：** 響應式長度單位，會根據螢幕寬度而變化。

絕對長度單位

這些單位被歸類為固定長度單位，這意味著使用絕對單位指定的長度在螢幕上保持精確不變的大小。

當瀏覽器擁有關於螢幕屬性、使用的印表機或其他合適的使用者代理的全面資訊時，這些單位將非常有效。

下表包含所有型別的絕對單位

單位	描述	等效值	示例
mm	指毫米，用於指定毫米測量。	1mm = 1/10cm	font-size: 10mm;
cm	指釐米，用於指定釐米測量。	1cm = 37.8px = 25.2/64in	font-size: 5cm;
Q	指四分之一毫米，用於指定釐米測量。	1Q = 1/40cm	font-size: 5Q;
in	指英寸，用於指定英寸測量。	1in = 2.54cm = 96px	font-size: 1in;
pt	指磅，用於指定磅測量。	1pt = 1/72in	font-size: 20pt;
pc	指派卡，用於指定派卡測量。	1pc = 1/6in	width: 6pc;
px	指畫素，用於指定畫素測量。	1px = 1/96in	font-size: 15px;

絕對單位對於響應性不是優先考慮的專案來說非常有價值。但是，對於響應式網站來說，它們不太有益，因為它們不會在螢幕尺寸變化時進行調整。

示例

這是一個使用絕對單位 (mm、cm、in、Q) 的字型大小示例

<html>
<head>
    <style>
        .unit-mm {
            font-size: 5mm;
        }
        .unit-cm {
            font-size: 1cm;
        }
        .unit-inch {
            font-size: 0.5in;
        }
        .unit-quarter {
            font-size: 40Q;
        }
    </style>
</head>

<body>
    <h1 class="unit-mm"> Font size 5mm </h1>
    <h1 class="unit-cm"> Font size 1cm </h1>
    <h1 class="unit-inch"> Font size 0.5inch </h1>
    <h1 class="unit-quarter"> Font size 40Q </h1>
</body>
</html>

相對長度單位

相對長度單位是相對於其他元素或螢幕視口進行測量的。

相對單位非常適合為響應式網站設定樣式，因為它們可以根據視窗大小或父元素按比例調整。這些單位定義相對於其他長度屬性的長度。

下表包含所有型別的相對單位

單位	描述	示例
em	相對於元素的字型大小。	font-size: 4em;
ex	相對於當前字型的 x 高度。	font-size: 4ex;
ch	相對於“0”的寬度。	font-size: 4ch;
rem	相對於根元素的字型大小。	font-size: 2rem;
lh	相對於元素的行高。	font-size: 4lh;
rlh	相對於根元素的行高。	font-size: 4rlh;
vh	相對於視口的高度。1vh = 1% 或視口高度的 1/100。	font-size: 4vh;
vw	相對於視口的寬度。1vw = 1% 或視口寬度的 1/100。	width: 4vw;
vmin	相對於視口較小的尺寸。1vmin = 1% 或視口較小尺寸的 1/100。	width: 4vmin;
vmax	相對於視口較大的尺寸。1vmax = 1% 或視口較大尺寸的 1/100。	width: 4vmax;
vb	相對於根元素塊軸方向的初始包含塊的大小。1vb = 包含塊大小（塊軸）的 1%。	font-size: 4vb;
vi	相對於根元素內聯軸方向的初始包含塊的大小。1vb = 包含塊大小（內聯軸）的 1%。	font-size: 4vi;
svw, svh	相對於較小視口的寬度和高度。1svw = 較小視口寬度的 1% 或 1/100，1svh = 較小視口高度的 1% 或 1/100。	width: 40svw; height: 40svh;
lvw, lvh	相對於較大視口的寬度和高度。1lvw = 較大視口寬度的 1% 或 1/100，1lvh = 較大視口高度的 1% 或 1/100。	width: 40lvw; height: 40lvh;
dvw, dvh	相對於動態視口的寬度和高度。1dvw = 動態視口寬度的 1% 或 1/100，1dvh = 動態視口高度的 1% 或 1/100。	width: 40dvw; height: 40dvh;

示例

這是一個使用相對單位 (em、rem、vw、vh、%) 的字型大小示例

<html>
<head>
    <style>
        .unit-em {
            font-size: 2em;
        }
        .unit-rem {
            font-size: 1.5rem;
        }
        .unit-vw {
            font-size: 5vw;
        }
        .unit-vh {
            font-size: 5vh;
        }
        .unit-percent {
            font-size: 150%;
        }
    </style>
</head>

<body>
    <h1 class="unit-em">Font size 2em </h1>
    <h1 class="unit-rem">Font size 1.5rem </h1>
    <h1 class="unit-vw">Font size 5vw </h1>
    <h1 class="unit-vh">Font size 5vh </h1>
    <h1 class="unit-percent">Font size 150% </h1>
</body>

</html>

單位 px（畫素）和 em（表示相對於字型大小的尺寸）是長度的兩個測量單位。要將 px 轉換為 em，請嘗試我們免費的 **CSS - PX 到 EM 轉換器。**

列印頁面