CSS - Measurement Units: A Beginner's Guide

您好，未來的 CSS 巔峰大師！? 歡迎來到我們神奇的 CSS 度量單位之旅。作為你們友善的鄰居計算機老師，我很興奮能夠引導你們進入這個網頁設計的重要部分。別擔心如果你從來沒有寫過一行代碼——我們將從頭開始，一起建立我們的知識！

CSS - Units

Length Units: The Building Blocks of CSS Measurements

讓我們從基礎開始。在 CSS 中，我們使用各種單位來指定元素的大小、邊距、內距等等。將這些單位視為數字世界的尺子和卷尺。它們幫助我們創建有機於所有設備上看起来都很棒網站，從小巧的手機到大型的桌面顯示器。

這裡是一個最常見的 CSS 長度單位的表格：

現在，讓我們深入探討這些單位，看看它們是如何實際運作的！

'Em' 單位就像一隻變色龍——它會根據環境進行調整。一個 'em' 等於當前元素的字体大小。這使得它對創建有縮放設計非常有用。

.parent {
font-size: 16px;
}

.child {
font-size: 1.5em; /* 這將是 24px */
margin-bottom: 1em; /* 這也將是 24px */
}

在這個例子中，.child 元素的字体大小將是 24px（1.5 * 16px），它的底部邊距也將是 24px。這就像 .child 在說："我想比我父親大 1.5 倍！"

'Ch' 單位有點像印刷術的書呆子。它基於當前字体中 '0'（零）字符的寬度。這對創建有一致的佈局特別有用，特別是對於等寬字体。

.code-snippet {
font-family: 'Courier New', monospace;
width: 40ch; /* 40 個 '0' 字符的寬度 */
}

這將創建一個正好 40 個字符寬的盒子——完美適合顯示代碼片段！

'Rem' 單位就像是 CSS 家庭中的智者。它總是引用根元素（通常是 <html> 標籤）的字体大小，忽略任何父元素的字体大小。

html {
font-size: 16px;
}

.container {
font-size: 20px;
}

.container p {
font-size: 1.5rem; /* 這將是 24px，基於 html 的字体大小 */
}

在這種情況下，即使 .container 有不同的字体大小，容器中的段落仍將是 24px（1.5 * 16px 從根元素）。

'Lh' 單位基於元素的行高，而 'rlh' 單位基於根元素的行高。這些是較新的單位，非常適合在設計中創建垂直節奏。

.paragraph {
font-size: 16px;
line-height: 1.5;
margin-bottom: 1lh; /* 這將等於行高 */
}

這創造了基於行高的一致段落間距。

現在我們進入了視窗單位——這些是我個人的最愛！'Vh' 代表視窗高度，'vw' 則是視窗寬度。它們是總視窗大小的百分比。

.hero-section {
height: 100vh; /* 視窗的整個高度 */
width: 100vw; /* 視窗的整個寬度 */
}

.half-width {
width: 50vw; /* 視窗寬度的一半 */
}

這些單位非常適合創建有機適應任何屏幕尺寸的設計。我曾經使用它們創建一個全屏登錄頁面，它在從手機到大屏幕電視的所有設備上都看起來令人驚艷！

'Vmin' 和 'vmax' 是視窗單元的動態二人組。'Vmin' 使用視窗的較小尺寸，而 'vmax' 使用較大的尺寸。

.square {
width: 50vmin;
height: 50vmin;
}

這創造了一個永遠是視窗較小尺寸 50% 的正方形——非常適合保持縱横比！

'Vb' 單位基於視窗在區塊方向（通常是水平書寫模式中的高度）的大小。它與 'vh' 相似，但會根據不同的書寫模式進行調整。

.vertical-text {
writing-mode: vertical-rl;
height: 100vb; /* 垂直書寫模式下的整個高度 */
}

這對於創建在水平和垂直書寫系統中都能良好運作的佈局特別有用。

'Vi' 單位是 'vb' 的內聯版本。它基於視窗在內聯方向（通常是水平書寫模式中的寬度）的大小。

.horizontal-scroll {
width: 200vi; /* 視窗寬度的兩倍 */
overflow-x: scroll;
}

這創建了一個永遠是視窗寬度兩倍的水平和滾動元素。

在 CSS 中，百分比值總是相對於某個東西。對於寬度，它們通常相對於父元素的寬度。

.parent {
width: 300px;
}

.child {
width: 50%; /* 這將是 150px */
}

在這裡，.child 元素將始終是其父元素的寬度的一半。就像告訴你的元素："你可以有你父親的一半！"

有時候，你會看到沒有單位的 CSS 屬性——只有數字。這些通常用於無單位屬性，如 line-height 或 opacity。

p {
line-height: 1.5; /* 字体大小的 1.5 倍 */
opacity: 0.8; /* 80% 不透明 */
}

在這種情況下，行高將是字体大小的 1.5 倍，創造出間距良好的文本，並且透明度將使文本稍微透明。

這就是 CSS 度量單位的全部內容，各位！記住，掌握這些單關鍵在於練習。在你的項目中嘗試混合和匹配這些單位，你很快就會對使用每一個單位時機產生直覺。

開心編程，並願你的佈局總是像素完美！?✨

Credits: Image by storyset