文章

單位與尺寸

發布於 更新於
作者 Ned Hsu 8 分鐘閱讀

單位與尺寸

在 CSS 中，單位和尺寸是用來定義元素的大小、間距、字體大小等屬性的數值。正確使用單位可以使網頁設計更加靈活和響應式。CSS 中的單位主要分為兩類：絕對單位和相對單位。

1. 絕對單位

絕對單位（Absolute Units）是固定不變的，通常適合用於印刷設計，但在響應式設計中較少使用。以下是常見的絕對單位：

  • px（像素，Pixels）：最常用的單位之一，1px 是螢幕上的一個點。px 是一個設備依賴的單位，隨著螢幕的解析度和尺寸變化而顯示大小不同。
  • pt（點，Points）：通常用於打印，1pt 等於 1/72 英寸。
  • cm（公分，Centimeters） 和 mm（毫米，Millimeters）：使用真實世界的測量單位，適合於精確的打印。
  • in（英寸，Inches）：1 英寸等於 2.54 厘米（公分）。
  • pc（派卡，Picas）：1pc 等於 12pt，用於印刷。

範例：

1
2
3
4

.element {
  width: 300px; /* 設置元素寬度為 300 像素 */
  font-size: 12pt; /* 字體大小為 12 點 */
}

展示

element

2. 相對單位

相對單位（Relative Units）是相對於另一個尺寸或元素的大小而定的單位，更適合用於響應式設計。

  • em：相對於當前元素的字體大小。例如，2em 表示兩倍於當前元素字體大小的尺寸。如果沒有明確設定，則以父元素的字體大小為基準。

    • 範例：

      1
2
3
4
5
6

      body {
  font-size: 16px; /* 設置基準字體大小 */
}
.element-em {
  font-size: 1.5em; /* 1.5 倍的父元素字體大小，即 24px */
}

      展示

      element-em

  • rem（根元素 em, Root em）：相對於根元素（通常是 <html>）的字體大小。無論元素的層級如何深，rem 都是相對於根元素的大小，更易於控制整體的比例。

    • 範例：

      1
2
3
4
5
6

      html {
  font-size: 16px; /* 設置根元素字體大小 */
}
.element-rem {
  font-size: 2rem; /* 2 倍的根元素字體大小，即 32px */
}

      展示

      element-rem

  • %（百分比，Percent）：相對於父元素的尺寸。例如，width: 50% 表示該元素的寬度是其父元素寬度的 50%。

    • 範例：

      1
2
3
4
5
6

      .parent {
  width: 400px;
}
.child {
  width: 50%; /* 子元素寬度為父元素寬度的 50%，即 200px */
}

      展示

      parent
      child

  • vh（視口高度，Viewport Height） 和 vw（視口寬度，Viewport Width）：相對於視口的高度和寬度。1vh 等於 1% 的視口高度，1vw 等於 1% 的視口寬度。

    • 範例：

      1
2
3
4
5
6

      .full-height {
  height: 100vh; /* 設置高度為視口高度的 100% */
}
.half-width {
  width: 50vw; /* 設置寬度為視口寬度的 50% */
}

      展示

      full-height
      half-width

  • vmin 和 vmax：相對於視口寬度和高度的較小或較大值。1vmin 等於視口寬度和高度中較小的 1%，1vmax 等於視口寬度和高度中較大的 1%。

    • 範例：

      1
2
3
4

      .square {
  width: 10vmin; /* 設置寬度為視口寬度和高度的較小值的 10% */
  height: 10vmin; /* 設置高度為視口寬度和高度的較小值的 10% */
}

      展示

      square

  • ch 和 ex：相對於字體的單位，其中 ch 是字符寬度的單位，等於 0 字符的寬度；ex 是字體的 x-height（通常是小寫字母 x 的高度）。

    • 範例：

      1
2
3

      .width-ch {
  width: 30ch; /* 設置寬度為 30 個字符的寬度 */
}

      展示

      width-ch

3. 單位的使用策略

  • em 和 rem：建議使用 rem 來設置全局的字體大小和間距，以保證一致性；使用 em 來設置相對於局部元素的大小，如子元素內的字體或內距。

  • px 和 %：px 適用於精確的控制，特別是在需要確定元素精確大小時（如圖片和按鈕）。% 適用於相對於父元素大小的元素設置，如響應式設計中的寬度和高度。

  • vh、vw、vmin、vmax：適合用於響應式設計，特別是在需要根據視口大小進行調整的情況下，例如全屏背景圖片或彈出窗口。

4. 響應式設計中的應用實例

4.1 彈性字體

為了確保字體在各種設備上保持一致的比例，可以使用 rem 設置彈性字體。

1
2
3
4
5
6
7
8
9
10
11

html {
  font-size: 16px; /* 設置基準字體大小 */
}

h1 {
  font-size: 2rem; /* 32px */
}

p {
  font-size: 1rem; /* 16px */
}

展示

h1

p

4.2 自適應元素大小

使用 vw 和 vh 來設置響應式元素大小，例如全屏的 hero 區域。

1
2
3
4
5
6

.hero {
  width: 100vw; /* 設置寬度為視口的寬度 */
  height: 100vh; /* 設置高度為視口的高度 */
  background-color: #999;
  background-size: cover;
}

展示

hero

4.3 流式佈局

使用 % 來實現流式佈局，讓元素根據父元素的大小自動調整。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

.container {
  width: 80%; /* 容器寬度為父元素的 80% */
  margin: 0 auto; /* 水平居中 */
  background-color: #999;
  color: #fff;
}

.sidebar {
  width: 30%; /* 側邊欄寬度為容器的 30% */
  float: left;
  background-color: #000;
}

.main {
  width: 70%; /* 主要內容區域寬度為容器的 70% */
  float: right;
  background-color: #666;
}

展示

sidebar
main
container

5. 小結

理解和正確使用 CSS 中的單位和尺寸對於創建靈活、響應的網頁設計非常重要。相對單位（如 rem、em、%、vh、vw）的靈活性使它們成為響應式設計的首選，並有助於根據不同設備和屏幕尺寸調整樣式。絕對單位（如 px）適用於需要精確控制的元素，但應謹慎使用。通過合理運用這些單位，可以更好地控制網頁的佈局和外觀，提升用戶體驗。

Software, CSS
CSS
本文章以 CC BY 4.0 授權