尺寸單位

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 調整元素大小並列印，那麼與尺規進行比較應正確。

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

如果列印這個頁面，div 會輸出為 10 x 5 公分的黑色矩形。請注意，CSS 不可用於數位內容，也可用於設定列印內容樣式。設計印刷品時，絕對長度非常實用。

相對長度

相對長度是根據基本值計算得出，類似於百分比。這些百分比和百分比的差別在於，您可以設定內容的大小元素。也就是說，CSS 中的單位 (例如 ch) 會使用文字大小做為基準，而 vw 則以可視區域寬度 (瀏覽器視窗) 為依據。相對長度在網路上的反應特性特別實用。

字型大小相關單位

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

可視區域相關單位

您可以將可視區域 (瀏覽器視窗) 的尺寸當做相對的基準。 這些單位會佔滿可用的可視區域空間。

div {
  width: 10vw;
}

p {
  max-width: 60ch;
}

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

其他單位

還有部分其他單位已指定來處理特定類型的值。

角度單位

在顏色模組中，我們查看了角度單位，這有助於定義角度值，例如 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 大小和單位
• Em 簡介
• 百分比說明