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 不僅用於數位內容,也適用於為紙本內容設定樣式。
在設計平面媒體時,絕對長度非常實用。
單位 | 名稱 | 等同於 |
---|---|---|
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 | 根元素的行高。 |
可視區域相對單位
您可以使用可視區域 (瀏覽器視窗) 的尺寸做為相對基準。這些單位會佔據可用可視區域空間的一部分。
單位 | 相對於 |
---|---|
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-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 顯示器),以及提供解析度較高的圖片。
進行隨堂測驗
測驗您對尺寸的瞭解
以下何者是有效的維度?
絕對和相對單位有何不同?
可視區域單位為絕對值。