流體排版 CSS clamp() 公式產生器

在行動裝置與桌面端視窗之間平滑縮放字型大小,消除媒體查詢造成的突兀跳躍。

步驟說明

  1. 1

    定義字型範圍

    輸入最小字型大小(例如 16px)與最大字型大小(例如 32px)。

  2. 2

    設定視窗邊界

    指定視窗寬度下限(例如 375px)與上限(例如 1440px)。

  3. 3

    複製 clamp() 程式碼

    點擊複製按鈕以取得產生的 CSS clamp() 程式碼片段。

線性視窗縮放

精準計算 rem 與 vw 的斜率與 Y 軸截距,在瀏覽器調整大小時線性內插計算字型大小。

乾淨的正式環境 CSS

輸出乾淨的單行 CSS 語句,可直接複製到 Tailwind 設定檔或樣式表中。

常見問題

所有現代瀏覽器都支援 CSS clamp 嗎?

是的,所有主流現代網頁瀏覽器皆已全面支援 CSS clamp()。

為什麼要使用 rem 而不是單純的像素(px)?

將 rem 與 vw 結合,能在動態縮放的同時,兼顧使用者的無障礙字型縮放設定。