尺寸單位(CSS)
速算:100%=1em=1rem=16px=12pt
螢幕內容列印時的單位轉換:Pixel→inch→dot
螢幕內容顯示時的單位轉換:相對單位→px→(ppi)→inch→絕對單位
1inch=2.54cm=25.4mm=72pt=6pc
絕對值
是種圖像元素單位,沒有具體的長寬值
隨顯示器的解析度與寬度改變
於同一顯示器裡,像素的尺寸不會隨著瀏覽器視窗長寬或是網頁內容改變
相對值
參照母元素
視其母元素為100%
參考基準點是母元素的對應屬性
似乎相當直覺
height: 50%是母元素高度的一半
width: 25%是母元素寬度的四分之一
參照的都是母元素的寬度
不是依據方向決定取用高度或寬度
參照的是元素自身的寬度或高度
transform: translate(0%, 100%)
向下移動等同元素自身高度的距離
相對值
參照當前元素
視當前元素的字體大小為1em
相對值
參照html根元素
<html>
視根元素的字體大小為1rem
瀏覽器預設字體大小為16px
因此通常1rem=16px
相對值
參照瀏覽器畫面寬度
視畫面寬度為100vw
相對值
參照瀏覽器畫面高度
視畫面寬為100vh
smallest viewport
largest viewport
dynamic viewport
code:css
body {
min-height: 100dvh;
}
footer {
position: sticky;
top: 100%;
}
相對值
當前vw和vh兩者之中較大的值
語法上省略了中間的%符號
v為從viewport(視口)而來
相對值
當前vw和vh兩者之中較小的值
相對值
等同於第一個可用字體裡的「x文字的高度」
在不包含x文字的字體之中亦會定義此單位
通常用於以文字為重的設計中
例如grid-template-columns: 1fr 1fr 2fr;
宣告每欄寬度為1/4、1/4、2/4
表達式
表達式
計算式中的值
表達式
式中最大的值
表達式
式中最小的值
表達式
指定最小值、基礎值、最大值
font-size: clamp(16px, 5vw, 20px);
取得容器最大尺寸的空間,當成填充條件
取得容器最小尺寸的空間,當成填充條件
自動設定空間尺寸
設定為與子元素的寬度相同
單位值、表達式和特殊值可混用
例如grid-template-columns: 1fr min-content minmax(100px, max-content);