CSS clamp 產生器
輸入小螢幕和大螢幕的寬度與尺寸，即可產生能平滑變更文字大小或間距的 CSS。預覽 px 或 rem 輸出，然後複製 CSS 和 Tailwind 程式碼，或儲存為文字。
可執行的操作
指定兩組寬度和尺寸
指定較窄和較寬檢視區的尺寸。支援 6 種類型：字型大小、間距、內距、外距、寬度和高度。
以 px 或 rem 產生程式碼
所有數值以 px 輸入，並選擇以 px 或 rem 輸出。可取得 CSS 宣告和 Tailwind 任意屬性程式碼。
立即檢查產生的 CSS
將 CSS 套用至預覽中的兩個元素。查看目前畫框寬度下的文字和間距呈現方式。
使用方法
選擇要變更的屬性
選擇要指定的 CSS 屬性，例如文字大小使用 font-size，元素間距使用 gap。
輸入兩個檢視區寬度和尺寸
輸入兩個檢視區寬度和各自的尺寸，單位為 px。較窄檢視區的尺寸不得大於較寬檢視區的尺寸。
確認輸出單位並產生程式碼
在進階設定中選擇 px 或 rem。使用 rem 時，也請確認基準字型大小後再按下「產生 CSS」。
預覽並取得程式碼
複製 CSS 並貼到使用處。開啟 Tailwind 程式碼以取得內容。也可一次複製全部 2 項或儲存為文字。
適用情境
平滑變更標題大小
需要為較窄和較寬檢視區設定文字大小，並在兩種寬度之間連續變化，而非分段變更時。
依檢視區調整間距
需要讓卡片間距或內距在設定的最小和最大尺寸之間變化時。
指定流動尺寸並查看預覽
clamp 中的 3 個值
clamp 是指定最小值、流動值和最大值的 CSS 函式。產生的公式會以線性表示式連接兩個參考點，並將範圍外的尺寸限制在端點值。
以 px 輸入；以 px 或 rem 輸出
檢視區寬度和尺寸都以 px 輸入。輸出 rem 時，尺寸和固定項會除以基準字型大小；檢視區寬度的 vw 係數則保持不變。
rem 基準須符合程式碼使用處
預設程式碼將 1rem 視為 16px。若使用程式碼處的根元素字型大小不同，端點尺寸和尺寸變化也會不同。請在使用處確認。
由預覽畫框決定檢視區寬度
預覽是獨立的顯示畫框。vw 會依畫框內部寬度計算，而非整個螢幕的寬度。依屬性不同，相同 CSS 會套用至文字、兩個元素之間的間距、留白或元素尺寸。
也請在程式碼使用處確認
預覽文字和結構固定。也請在使用程式碼的地方確認字型、長文字、換行和瀏覽器文字放大效果。Tailwind 程式碼使用任意屬性格式；也請確認使用處是否能辨識並產生該格式。
常見問題
超出指定的檢視區寬度範圍時會怎樣？
低於指定的較小寬度時會使用最小尺寸，高於較大寬度時會使用最大尺寸。使用 rem 時，必須使用與產生程式碼時相同的基準字型大小。
rem 的基準字型大小是什麼？
此設定指定計算 1rem 時使用的 px 數值。預設為 16px，可在進階設定中變更為 1–1000px。請配合使用此程式碼的根元素字型大小。
可以指定相同尺寸或負值嗎？
將最小值和最大值設為相同數值即可維持固定尺寸。僅 margin 允許負值。不支援檢視區變寬時尺寸反而縮小的情況。
屬性或數值變更後會立即套用嗎？
變更後會清除產生的程式碼和預覽。按下「產生 CSS」以更新。變更輸出單位或基準字型大小時也相同。
可以變更預覽文字嗎？
範例文字和 Aa 123 都是固定內容，無法編輯文字。也請確認使用產生 CSS 的頁面中實際文字和顯示寬度。
輸入與結果
- 檢視區寬度
- 1–100000px。較窄的檢視區寬度必須小於較寬的檢視區。也接受小數。
- 尺寸
- 0–10000px。只有 margin 可低至 −10000px。較窄檢視區的尺寸不得大於較寬檢視區的尺寸。
- 輸出
- CSS 宣告和 Tailwind 任意屬性。將全部 2 項儲存為 css-clamp-generator.txt。
- 精度
- 產生的公式使用最多 13 位有效數字的係數。例如，寬度非常接近而四捨五入後的公式無法重現參考點時，會發生錯誤。