CSS Clamp 產生器
自動計算並產生 CSS clamp() 函數的最佳設定，讓響應式設計更完美。
參數設定
數值變化曲線圖
即時預覽
流式排版 (Fluid Typography)
人人生而自由，在尊嚴和權利上一律平等。
輸出的程式碼
關於本工具
CSS Clamp 產生器是一款可以幫您自動產生「流式排版」(Fluid Typography) 與間距設定的工具。透過 CSS 的 clamp() 函數，讓元素的尺寸能根據螢幕寬度平滑地縮放。
您只需要輸入最小與最大的元素尺寸，以及對應的螢幕寬度，系統就會自動計算出最完美的 clamp() 算式。您可以透過互動圖表與即時預覽區來確認縮放的過渡效果，並且能一鍵將程式碼輸出為 CSS、CSS 變數或 Tailwind CSS 格式。
所有的計算都在您的瀏覽器端完成，不會將任何資料傳送至外部伺服器。完全免費，無須註冊即可立刻使用。
使用方法
設定參數
輸入最小與最大的螢幕寬度 (Viewport) 及對應的尺寸。此功能不限於字體大小，也可以應用在 margin、padding 等其他屬性上。
查看圖表與預覽
透過圖表視覺化地確認在不同螢幕寬度下，數值的變化趨勢。並利用預覽區塊模擬螢幕寬度的改變，觀察實際的渲染效果。
複製程式碼
在輸出區塊選擇您需要的格式 (CSS、CSS 變數、Tailwind)，接著點擊複製按鈕，即可直接貼上到您的專案中。
詞彙表
- clamp()
- CSS 的一個比較函數，格式為
clamp(最小值, 理想值, 最大值)。它可以設定數值的上下限，是實作不需要媒體查詢 (Media Queries) 也能平滑縮放的響應式設計的強大武器。 - vw (viewport width)
- CSS 的相對長度單位，代表視口 (Viewport) 寬度的 1%。例如，如果螢幕寬度是 1000px，那麼
1vw就是 10px。它是計算與螢幕寬度連動的流式數值所不可或缺的單位。 - rem
- 基於根元素 (通常是
<html>) 字體大小的 CSS 相對單位。使用 rem 來取代 px 是為了尊重使用者的瀏覽器偏好設定，並提升無障礙性 (Accessibility)。 - 流式排版 (Fluid Typography)
- 一種設計技巧，讓字體大小能隨著螢幕寬度「平滑地」縮放，而不是在特定斷點 (Breakpoints) 時才「跳躍式」地改變大小，確保在任何尺寸的螢幕上都有最佳的閱讀體驗。
- 理想值 (preferred value)
- 在
clamp()函數中作為第二個參數的理想數值。本工具使用線性方程式的原理，將其計算為截距(rem) + 斜率 × 100(vw)，藉此實現在最大與最小限制之間的平滑過渡。
技術解析：流式排版的原理
使用 CSS clamp() 函數來實現流式排版的背後，其實就是線性函數 (一次方程式) 的數學應用。
公式的推導
如果我們有「最小尺寸 (minSize)」、「最大尺寸 (maxSize)」以及對應的「最小螢幕寬度 (minVW)」、「最大螢幕寬度 (maxVW)」，那麼斜率與截距的計算方式如下：
- 斜率 (slope) = (maxSize - minSize) / (maxVW - minVW)
- 截距 (intercept) = minSize - slope × minVW
利用這兩個數值，我們就能將「理想值 (preferred value)」轉換為一段以 vw 為單位的算式：截距(rem) + 斜率 × 100(vw)。
與媒體查詢 (Media Queries) 的差異
傳統的 @media 查詢會在特定的斷點處產生尺寸的跳躍式改變。而 clamp() 則能保證在任何未知的螢幕寬度下都擁有平滑、線性的縮放效果。這不只讓過渡更加自然，也大幅減少了 CSS 的程式碼量並提升了維護性。
常見問題
- Q.我的資料會被傳送到伺服器嗎？
- 不會。所有的計算都是完全在您的瀏覽器端本地進行的，絕對不會將任何資料傳送至外部。可以安心使用。
- Q.這個寫法支援 IE 瀏覽器嗎？
- 不支援。Internet Explorer 不支援
clamp()函數。請在 Chrome、Firefox、Safari 或 Edge 等現代瀏覽器中使用。 - Q.可以用在 font-size 以外的屬性嗎？
- 可以。
clamp()可以應用在任何 CSS 的長度屬性上，包含padding、margin、gap或是width等。您可以從工具中選擇目標屬性來產生對應的程式碼。 - Q.為什麼輸出結果要使用 rem 而不是 px？
- 使用 rem 主要是為了無障礙性考量。如果使用者在瀏覽器設定中調大了預設的字體大小，使用 px 的設定將會忽略這個偏好；而使用 rem 的話，網站就能跟隨使用者的設定進行正確的等比例縮放。
- Q.這背後的數學計算原理是什麼？
- 工具使用了線性方程式 (y = mx + b) 的原理。將提供的「最大/最小螢幕寬度」與「尺寸」代入，計算出對應的「斜率 (slope)」與「截距 (intercept)」，藉此利用 vw 單位產生出能夠等比例縮放的「理想值」。
使用場景
📱響應式網頁設計
讓標題與內文從手機到桌面版都能平滑縮放，只需一行 CSS 就能搞定，大幅減少複雜的媒體查詢 (Media Queries)。
🧩設計系統 (Design Systems)
將全站的字體比例使用 clamp() 進行集中管理。將其輸出為 CSS 變數後，就能立即作為專案的設計權杖 (Design Tokens) 使用。
📏流式的間距設計
不只字體，將 clamp() 應用在 padding、margin 或 CSS Grid 的 gap 上，可以創造出無論在任何螢幕尺寸下都完美協調的版面佈局。
🤝提升無障礙性
透過以 rem 為基礎的計算輸出，完美尊重並跟隨使用者瀏覽器的預設字體大小設定，打造符合 WCAG 規範、對所有人皆友善的網站。
發送反饋
請告訴我們您的想法，以幫助我們改進工具。
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.