尺寸單位(CSS)
尺寸單位
一次搞懂 CSS 字體單位:px、em、rem 和 %
CSS: em, px, pt, cm, in…
CSS Ruler
cheatsheet
速算:100%=1em=1rem=16px=12pt
螢幕內容列印時的單位轉換:Pixel→inch→dot
螢幕內容顯示時的單位轉換:相對單位→px→(ppi)→inch→絕對單位
1inch=2.54cm=25.4mm=72pt=6pc
單位值、表達式和特殊值可混用
例如grid-template-columns: 1fr min-content minmax(100px, max-content);
單位值
px(CSS)
%(CSS)
em(CSS)
rem(CSS)
vw(CSS)
vh(CSS)
svw
smallest viewport
svh
lvw
largest viewport
lvh
dvw
dynamic viewport
dvh(CSS)
容器查詢(CSS)
cqw
相對於容器元素width的比例,1cqw=1%
例如將font-size設為20cqw,就可確保必定為5文字大小的寬度
cqh
相對於容器元素height的比例,1cqh=1%
cqi
相對於容器元素inline尺寸的比例,1cqi=1%
cqb
相對於容器元素block尺寸的比例,1cqb=1%
cqmin
取容器元素的inline與block尺寸
cqmax
vmax(CSS)
vmin(CSS)
ex(CSS)
lh(CSS)
cap(CSS)
fr(CSS)
2025-07-31 CSSの単位がたくさんあり何を使えばよいか迷った時に、フォント、スペース、ポジション、要素の幅・高さに最適な単位は | コリス
表達式
calc()
計算式中的值
max()
式中最大的值
min()
式中最小的值
minmax()
只能用於Grid(CSS)
clamp()
指定最小值、基礎值、最大值
font-size: clamp(16px, 5vw, 20px);
特殊值
max-content
取得容器最大尺寸的空間,當成填充條件
min-content
取得容器最小尺寸的空間,當成填充條件
auto
自動設定空間尺寸
fit-content
fit-content - CSS: Cascading Style Sheets | MDN
設定為與子元素的寬度相同