先看這個例子
標題採用 4vw 作偏好字級,範圍在 20px 至 36px。這些是教學示範值,量到字級不等於已證明可讀性或無障礙合規。
| 情況 | 輸入或查看方法 | 結果與意思 |
|---|---|---|
| 窄視窗 | 320 的 4%=12.8 | 使用 20px 下限 |
| 中間闊度 | 600 的 4%=24 | 偏好值 24px 在範圍內 |
| 闊視窗 | 960 的 4%=38.4 | 使用 36px 上限 |
瀏覽器怎樣處理
clamp 在所附上下限之間採用偏好運算。本例用 px 和視窗單位,因此只改根元素 rem 字級,並不足以放大這個標題。驗證須另放大顯示文字,再查重排。
只有比例式,沒有上下限
反例移除 clamp,直接用 4vw。
<style>body{margin:8px}</style>
<style>h2{font-size:4vw}</style><h2>工作坊筆記</h2>320px 時是 12.8px,960px 時是 38.4px,兩邊都超出本例 20–36px 所選範圍。
試着修正
視窗 750px 時,正例會用多少字級?
查看參考答案
30px;4vw 等於 30px,在 20 和 36 之間。
- 直接讀字級計算值,不從截圖估。
- 原比例式和放大後顯示文字都要測。