尺寸單位

CSS Podcast - 008：尺寸單位

網路是回應式的媒介 但有時候，您可能會希望控制這些維度的尺寸以改善整體介面品質。 舉例來說，為提升可讀性，限制行長度是不錯的做法。 怎麼運用網頁等靈活的媒介來達成這個目標？

在本例中 您可以使用 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 上的尺寸和單位
• Emms 專用
• 百分比說明