分類: 開發工具
流體間距刻度產生器
建立一整組以 clamp() 為基礎的間距變數
設定在窄視窗與寬視窗下的基礎間距大小，以及一個縮放比例，即可取得一整組 --space-* 自訂屬性，每一個都是各自獨立、能在兩者之間平滑縮放的 clamp()，可直接貼進 :root。
| 變數 | 輸出 |
|---|---|
| --space-3xs | clamp(0.0988rem, 0.0601rem + 0.1718vw, 0.1975rem) |
| --space-2xs | clamp(0.1481rem, 0.0902rem + 0.2576vw, 0.2963rem) |
| --space-xs | clamp(0.2222rem, 0.1353rem + 0.3865vw, 0.4444rem) |
| --space-sm | clamp(0.3333rem, 0.2029rem + 0.5797vw, 0.6667rem) |
| --space-md | clamp(0.5rem, 0.3043rem + 0.8696vw, 1rem) |
| --space-lg | clamp(0.75rem, 0.4565rem + 1.3043vw, 1.5rem) |
| --space-xl | clamp(1.125rem, 0.6848rem + 1.9565vw, 2.25rem) |
| --space-2xl | clamp(1.6875rem, 1.0272rem + 2.9348vw, 3.375rem) |
| --space-3xl | clamp(2.5313rem, 1.5408rem + 4.4022vw, 5.0625rem) |
輸出
:root {
--space-3xs: clamp(0.0988rem, 0.0601rem + 0.1718vw, 0.1975rem);
--space-2xs: clamp(0.1481rem, 0.0902rem + 0.2576vw, 0.2963rem);
--space-xs: clamp(0.2222rem, 0.1353rem + 0.3865vw, 0.4444rem);
--space-sm: clamp(0.3333rem, 0.2029rem + 0.5797vw, 0.6667rem);
--space-md: clamp(0.5rem, 0.3043rem + 0.8696vw, 1rem);
--space-lg: clamp(0.75rem, 0.4565rem + 1.3043vw, 1.5rem);
--space-xl: clamp(1.125rem, 0.6848rem + 1.9565vw, 2.25rem);
--space-2xl: clamp(1.6875rem, 1.0272rem + 2.9348vw, 3.375rem);
--space-3xl: clamp(2.5313rem, 1.5408rem + 4.4022vw, 5.0625rem);
}每個變數都是各自獨立的 clamp()，因此每一階都會在兩個視窗寬度之間平滑縮放。
本頁的所有處理都在瀏覽器中完成，不會上傳任何內容。
這個工具能做什麼
單一的流體 clamp() 對單一數值很有用，但大多數版面需要一整組彼此協調的間距刻度，若逐一手寫每個 clamp()，同樣的運算失誤就會在每個變數上重複發生。本工具只需要視窗兩端各一個基礎大小以及一個比例，就能像建立字級刻度那樣，圍繞一個中間階生成一組對稱的變數，讓整組刻度在視窗變化時始終保持比例一致。
使用方式
- 設定窄視窗與寬視窗下的基礎間距大小。
- 設定各階之間的縮放比例。
- 複製產生的 :root 區塊，內含所有 --space-* 自訂屬性。
隱私說明
本工具完全在你的瀏覽器中執行。輸入的內容不會被上傳、儲存或分享，關閉分頁就隨之消失。
常見問題
- 為什麼是九個階？
- 九個階能在中間值上下各提供四個層級，涵蓋大多數版面所需的範圍，從緊湊的行內間距到大型區塊間距都能兼顧，之後也不必再另外發明新的名稱。
- 會傳送任何內容到伺服器嗎？
- 不會。每個 clamp() 都是依你輸入的數字在頁面內計算出來的，這也是表格與 CSS 輸出能即時更新的原因。
- 可以搭配 CSS clamp 產生器一起使用嗎？
- 可以。本工具會用一組輸入產生一整套刻度；CSS clamp 產生器則適合用在單一、一次性的數值，例如標題字級，兩者背後用的是同一套運算方式。