尺寸單位

CSS Podcast - 008:大小單位

網頁是回應式媒介,但有時您可能需要控制其尺寸,以改善整體介面品質。例如限制行長度,以提升可讀性。怎麼運用網頁等靈活的媒介來達成這個目標?

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

Numbers

數字可用來定義 opacityline-height,甚至是 rgb 中的色彩通道值。數字是無單位的整數 (1、2、3、100) 和小數 (.1、.2、.3)。

數字的意義會因情境而異。 舉例來說,定義 line-height 時,如果沒有支援的單位,數字就代表比率:

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

在本範例中,1.5 等於 p 元素的計算像素字型大小150%。這表示如果 pfont-size24px,則行高會以 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-boxdiv p 的寬度為 150px

如果將 marginpadding 設為百分比,則無論方向為何,這些值都會是父項元素寬度的一部分。

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

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

在上述程式碼片段中,margin-toppadding-left 都會計算為 150px

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

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

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

尺寸與長度

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

絕對長度

所有絕對長度都會解析為相同的基準,因此無論在 CSS 中使用何處,都能預測長度。舉例來說,如果您使用 cm 設定元素大小並列印,那麼相較於尺規,這項元素應該準確無誤。

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

如果列印這個頁面,div 會輸出為 10 x 5 公分的黑色矩形。 請注意,CSS 不僅用於數位內容,也適用於為紙本內容設定樣式。 在設計平面媒體時,絕對長度非常實用。

單位 名稱 等同於
cm 公分 1 公分 = 96 像素/2.54
mm 公釐 1mm = 1/10 公分
Q 四分之一公釐 1Q = 1/40th (1 公分)
in 英寸 1 英寸 = 2.54 公分 = 96 像素
pc Picas 1pc = 1/6 吋
pt 積分 1pt = 1/72 吋
px 像素 1 像素 = 1/96 吋

相對長度

相對長度是根據底數 (與百分比) 計算而得。與百分比不同的是,您可以根據內容調整元素大小。也就是說,CSS 有 ch 等單位,以文字大小做為基礎,而 vw 則是根據可視區域 (瀏覽器視窗) 的寬度。由於回應式網頁的特性,相對長度在網頁上特別實用。

與字型大小相關的單位

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

單位 相對於:
em 相對於字型大小,也就是 1.5em 會比其父項的基礎計算字型大小大 50%。(過去是指大寫字母「M」的高度)。
ex 使用最佳化方式,判斷是否要在元素的目前計算字型大小中使用 x-height、字母「x」或 `.5em`。
cap 系統針對元素目前計算出的字型大小,以大寫字母的高度。
ch 元素字型中窄字符的平均字元前進距離 (以「0」字符表示)。
ic 元素字型中全寬字符的平均字元前進距離,以「水」(CJK 水字義字形,U+6C34) 字符代表。
rem 根元素的字型大小 (預設為 16 像素)。
lh 元素的行高。
rlh 根元素的行高。
文字 CSS 是 10x 的優質字型,其中包含升線高度、降線高度和 x-height 的標籤。x-height 代表 1ex,0 代表 1ch

可視區域相對單位

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

單位 相對於
vw 可視區域寬度的 1%。使用者會利用這個單位執行炫目的字型技巧,例如根據頁面寬度調整標題字型的大小,這樣當使用者調整大小時,字型也會調整大小。
vh 可視區域高度的 1%。舉例來說,如果您有頁尾工具列,就可以用這個運算子排列 UI 中的項目。
vi 根元素內嵌軸中可視區域大小的 1%。軸指的是寫入模式。在英文等水平書寫模式中,內嵌軸是水平。在垂直書寫模式中 (例如某些日文字體) 中,內嵌軸會由上至下執行。
vb 根元素區塊軸的 1% 可視區域大小。若是區塊軸,則是語言的方向。由左至右的語言 (例如英文) 會使用垂直的區塊軸,因為英文讀者會從上到下解析網頁。垂直書寫模式有水平區塊軸。
vmin 可視區域較小尺寸的 1%。
vmax 可視區域較大尺寸的 1%。
div {
  width: 10vw;
}

p {
  max-width: 60ch;
}

在本例中,div 會是可視區域寬度的 10%,因為 1vw 是可視區域寬度的 1%p 元素的 max-width60ch,代表在計算的字型和大小中,寬度不得超過 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 的值為 192dpidpi 單位代表每英寸像素數。為此,實用的背景資訊是偵測極高解析度的螢幕 (例如媒體查詢中的 Retina 顯示器),以及提供解析度較高的圖片。

進行隨堂測驗

測驗您對尺寸的瞭解

以下何者是有效的維度?

公分
公分,有效的絕對尺寸。
ui
使用者介面不是 CSS 中的維度。
in
英寸,有效的絕對尺寸。
8 日
不是 CSS 維度
像素
像素,有效的絕對尺寸。
ch
字元單位,有效的相對維度。
ux
使用者體驗不是 CSS 中的維度。
em
字母「M」單位,有效的相對維度。
ex
字母「x」單位,有效的相對維度。

絕對和相對單位有何不同?

絕對值無法變更,但相對單位可以變更
絕對值可以變更,但用於計算的基礎則無法變更。
絕對長度會根據單一共用基準值計算,相對單位會與可能變動的基準值進行比較。
相對單位可根據情境進行調整,因此更具彈性,但絕對單位可提供強大的功能和可預測性,可為特定設計奠定基礎。

可視區域單位為絕對值。

雖然這些屬性看起來是絕對值,但實際上是相對於 viewport 而言,而 viewport 可能是 iframe 或 webview,不一定代表裝置螢幕大小。
這些值會相對於建立時使用的文件視窗,而該視窗不一定與裝置螢幕相同。

資源