CSS Clamp 產生器
自動計算並產生 CSS clamp() 函數的最佳設定，讓響應式設計更完美。
關於本工具
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 規範、對所有人皆友善的網站。
Send Feedback
Please let us know your thoughts to help us improve the tool.
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.