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 不僅用於數位內容,也適用於為紙本內容設定樣式。
設計印刷時,絕對長度能夠派上用場。
單位 | 名稱 | 等同於 |
---|---|---|
公分 | 公分 | 1 公分 = 96px/2.54 |
公釐 | 公釐 | 1 公釐 = 1/10 (1 公分) |
Q | 4 公釐 | 1Q = 1/40th (1 公分) |
in | 英寸 | 1 吋 = 2.54 公分 = 96 像素 |
電腦 | 畢卡 | 1PC = 第 1/6 英寸 |
分 | 積分 | 1 分 = 第 1/72 英寸 |
像素 | 像素 | 1px = 第 1/96 英寸,共 1 英寸 |
相對長度
相對長度是根據底數 (與百分比) 計算而得。
這些與百分比的差異在於,你可以根據情境調整元素大小。
換句話說,CSS 的 ch
這類單位會使用文字大小
以及以可視區域寬度 (瀏覽器視窗) 為依據的 vw
。
相對長度的特性在網頁回應快速,因此特別適合用於網路。
字型大小相關單位
CSS 提供實用單位,相對於算繪的字體排版元素大小。
例如文字本身的大小 (em
個單位),或是字體的寬度 (ch
個單位)。
單位 | 相對於: |
---|---|
em | 相對於字型大小 亦即 1.5em,將大於其父項基本字型大小的 50%。 (一直來說,大寫字母「M」的高度)。 |
例如 | 判斷是否應使用 x 高度 針對元素目前計算出的字型大小,以字母「x」或「.5em」表示。 |
cap | 系統針對元素目前計算出的字型大小,以大寫字母的高度。 |
ch | 平均字元推進 是較窄的字符 (以「0」字符表示)。 |
ic | 普通 字元推進 將顯示與廣告有關的完整寬度字符 會(CJK 水彩表,U+6C34) 字符。 |
雷姆 | 根元素的字型大小 (預設為 16 像素)。 |
H | 元素的行高。 |
rlh | 根元素的行高。 |
可視區域相關單位
您可以將可視區域 (瀏覽器視窗) 的尺寸當做相對基準。 這些單位會佔據可用可視區域空間的一部分。
單位 | 相對於 |
---|---|
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 媒體查詢中的顯示畫面,以及提供解析度較高的圖片。
隨堂測驗
測試您對尺寸的瞭解
以下何者是有效維度?
絕對和相對單位有何不同?
可視區域單位為絕對值。