跳至內容
Astera Technology

字體隨視窗變大,也要有上下限

在三個視窗闊度量度 clamp(20px,4vw,36px),看何時用下限、比例值和上限。

320px 時字級 20px,600px 時 24px,960px 時 36px。

下載完整個案資料及參考答案 ↓

先看這個例子

標題採用 4vw 作偏好字級,範圍在 20px 至 36px。這些是教學示範值,量到字級不等於已證明可讀性或無障礙合規。

輸入與瀏覽器原生結果
情況輸入或查看方法結果與意思
窄視窗320 的 4%=12.8使用 20px 下限
中間闊度600 的 4%=24偏好值 24px 在範圍內
闊視窗960 的 4%=38.4使用 36px 上限
下載可編輯 CSV ↓

瀏覽器怎樣處理

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 之間。

  • 直接讀字級計算值,不從截圖估。
  • 原比例式和放大後顯示文字都要測。

原始例子檔案

相關資源