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 不可用於數位內容,也可用於設定列印內容樣式。設計印刷品時,絕對長度非常實用。
單位 | 名稱 | 相當於 |
---|---|---|
cm | 公分 | 1 公分 = 96px/2.54 |
公釐 | 公釐 | 1 公釐 = 1/10/1 公分 |
Q | 15 公釐 | 1Q = 1/40/1 公分 |
in | 英寸 | 1 英寸 = 2.54 公分 = 96 像素 |
pc | 畢卡斯 | 1 電腦 = 1/6 的 1 英寸 |
點 | 得分 | 1 分 = 1/72 分之 1 |
px | 像素 | 1px = 1/96th of 1in |
相對長度
相對長度是根據基本值計算得出,類似於百分比。這些百分比和百分比的差別在於,您可以設定內容的大小元素。也就是說,CSS 中的單位 (例如 ch
) 會使用文字大小做為基準,而 vw
則以可視區域寬度 (瀏覽器視窗) 為依據。相對長度在網路上的反應特性特別實用。
字型大小相關單位
CSS 提供與轉譯字體排版元素大小相關的實用單位,例如文字本身的大小 (em
單位) 或字體字元的寬度 (ch
單位)。
單位 | 相對於: |
---|---|
通話 | 相對於父項的字型大小,例如 1.5em 會比父項的基本計算字型大小多出 50%。 (過去,大寫字母「M」的高度)。 |
例如 | 判斷在目前計算的元素字型大小中,是否要使用 x 高度、字母「x」或「.5em」。 |
大寫 | 元素目前所計算字型大小中的大寫字母高度。 |
ch | 元素字型中窄字符的平均先進字元 (以「0」字符表示)。 |
ic | 平均先進字元在元素字型中,以「工廠」(CJK 水標本,U+6C34) 代表的全形字符表示。 |
rem | 根元素的字型大小 (預設為 16px)。 |
lh | 元素的行高。 |
RHol | 根元素的行高。 |
可視區域相關單位
您可以將可視區域 (瀏覽器視窗) 的尺寸當做相對的基準。 這些單位會佔滿可用的可視區域空間。
單位 | 相對於 |
---|---|
vw | 可視區域寬度的 1%。這個單元可用來製作酷炫的字型技巧,例如根據網頁寬度調整標頭字型大小,這樣隨著使用者調整大小,字型也會隨之調整大小。 |
vh | 可視區域高度的 1%。舉例來說,如果您有頁尾工具列,可以使用此功能在 UI 中排列項目。 |
vi | 根元素的內嵌軸中可視區域大小的 1%。軸是指書寫模式。在英文等水平寫入模式中,內嵌軸是水平。在部分日文字體等垂直書寫模式中,內嵌軸由上而下。 |
vb | 根元素的區塊軸中可視區域大小的 1%。如為區塊軸,這會是語言的方向。英文 (例如英文) 的 LTR 語言會有垂直區塊軸,因為英文讀者會由上而下剖析網頁。垂直書寫模式有水平區塊軸。 |
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 螢幕,然後提供解析度更高的圖片。
隨堂測驗
測驗您的尺寸相關知識
以下何者是有效的維度?
絕對和相對單位有何不同?
可視區域單位為絕對值。