尺寸單位

CSS Podcast - 008: Sizing Units

網頁是回應式媒介，但有時您可能需要控制其尺寸，以改善整體介面品質。例如限制行長度，以便提升可讀性。那麼，在像網頁這種彈性媒介中，要如何做到這一點呢？

在這種情況下，您可以使用 ch 單位，該單位等於在計算大小時，算繪字型中「0」字元的寬度。這個單位可讓您使用專門用於調整文字大小的單位限制文字寬度，進而無論文字大小為何，都能提供可預測的控制項。ch 單位是少數幾個可用於特定情境 (如本例) 的單位之一。

Numbers

數字用於定義 opacity、line-height，甚至 rgb 中的顏色管道值。數字是無單位的整數 (1、2、3、100) 和小數 (.1、.2、.3)。

數字的含義取決於其所在的上下文。舉例來說，定義 line-height 時，如果未使用支援的單位定義，數字就會代表比率：

p {
  font-size: 24px;
  line-height: 1.5;
}

在這個範例中，1.5 等於 p 元素計算出的像素字型大小的 150%。也就是說，如果 p 的 font-size 為 24px，系統會將行高計算為 36px。

您也可以在下列位置使用數字：

• 設定篩選器值時：filter: sepia(0.5) 會將 50% 棕褐色濾鏡套用至元素。
• 設定不透明度時：opacity: 0.5 會套用 50% 不透明度。
• 在色彩通道中：rgb(50, 50, 50)，其中 0 到 255 的值可用於設定色彩值。查看色彩課程。
• 如要轉換元素：transform: scale(1.2) 會將元素縮放至初始大小的 120%。

百分比

在 CSS 中使用百分比時，您必須瞭解百分比的計算方式。舉例來說，width 會以百分比計算，計算方式為父項元素的可用寬度。

div {
  width: 300px;
  height: 100px;
}

div p {
  width: 50%;
}

在上述範例中，假設版面配置使用預設的 box-sizing: content-box，div p 的寬度為 150px。

如果將 margin 或 padding 設為百分比，無論方向為何，都會是父項元素寬度的一部分。

div {
  width: 300px;
  height: 100px;
}

div p {
  margin-top: 50%; /* calculated: 150px */
  padding-left: 50%; /* calculated: 150px */
}

在上述範例中，margin-top 和 padding-left 都會計算為 150px。

div {
  width: 300px;
  height: 100px;
}

div p {
  width: 50%; /* calculated: 150px */
  transform: translateX(10%); /* calculated: 15px */
}

如果將 transform 值設為百分比，則會根據含有轉換集的元素。在這個範例中，p 的 translateX 值為 10%，width 為 50%。首先，計算寬度會是多少：150px，因為它是父項寬度的 50%。接著，請取 150px 的 10%，也就是 15px。

尺寸和長度

如果您為數字附加單位，該數字就會變成維度。例如 1rem 是維度。在這個情況下，規格中將附加至數字的單位稱為維度符記。長度是指距離的維度，可以是絕對或相對。

絕對長度

所有絕對長度都會解析為相同的基準，因此無論在 CSS 中使用何處，都能預測長度。舉例來說，如果您使用 cm 調整元素大小，然後進行列印，與尺規比較後應該會發現結果正確無誤。請注意，由於像素大小的差異，物理單位 (例如 cm 和 in) 無法在螢幕上以這些大小顯示。實體單位最適合用於列印樣式表單，因為在這種情況下，實體單位會更可靠。

div {
  width: 10cm;
  height: 5cm;
  background: black;
}

如果您列印這個頁面，div 會以 10x5 公分黑色矩形的形式列印。請注意，CSS 不僅可用於數位內容，也能用於設定列印內容的樣式。在設計平面媒體時，絕對長度非常實用。

相對長度

相對於基值計算的相對長度，類似於百分比。與百分比不同的是，您可以根據相關的基礎大小 (例如預設字型大小或視窗尺寸) 定義大小。也就是說，CSS 有 ch 等單位，會以字型大小指標做為基礎，而 vw 則是根據可視區域 (瀏覽器視窗) 的寬度。由於回應式網頁的特性，相對長度在網頁上特別實用。

與字型大小相關的單位

CSS 提供實用的單位，可與算繪排版元素的大小相關聯，例如文字本身的大小 (em 單位) 或字型字元寬度 (ch 單位)。

可視區域相對單位

您可以使用可視區域 (瀏覽器視窗) 的尺寸做為相對基準。這些單位會將可用的檢視區域空間分割。

div {
  width: 10vw;
}

p {
  max-width: 60ch;
}

在本例中，div 會是可視區域寬度的 10%，因為 1vw 是可視區域寬度的 1%。p 元素的 max-width 為 60ch，也就是說，在計算的字型和大小中，寬度不得超過 60 個「0」字元。

可視區域相依單位的替代方案

只要可視區域大小不變，可視區域相對單位的值就會維持不變。不過，行動瀏覽器通常會顯示或隱藏 UI 元素，以便在小螢幕上盡可能顯示最多內容，而不會變更計算的中繼檢視點大小。您可以使用 viewport 相對單位的替代方案，以便考量這些對可見區域的變更。

容器相對單位

您可以使用元素容器的尺寸做為相對依據。這些單位會將可用的容器空間分割。這些屬性在容器查詢中很實用，可根據可用空間設定字型大小。

其他單位

我們也指定了其他單位，用於處理特定類型的值。

角度單位

在顏色模組中，我們討論了角度單位，這有助於定義角度值，例如 hsl 中的色調。這些函式也適用於轉換函式中的元素。

div {
  width: 150px;
  height: 150px;
  transform: rotate(60deg);
}

使用 deg 角度單位，您可以在中心軸上旋轉 div 90°。

div {
  background-image: url('a-low-resolution-image.jpg');
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  div {
    background-image: url('a-high-resolution-image.jpg');
  }
}

解析度單位

在前述範例中，min-resolution 的值為 192dpi。dpi 單位代表「每英寸像素數」。這項功能的實用情境是偵測超高解析度的螢幕，例如在媒體查詢中偵測 Retina 螢幕，並提供更高解析度的圖片。

進行隨堂測驗

測驗您對尺寸的瞭解程度

資源

• CSS 規格值和單位等級 4
• MDN 的大小和單位
• Ems 相關資訊
• 百分比說明