CSS clamp 计算器（流式排版）

CSS 的 clamp(最小值, 首选值, 最大值) 能让尺寸随屏幕宽度平滑增长，并在最小值和最大值处停住，无需媒体查询。难点在于中间的值：它由 rem 和 vw 混合而成，必须在某个视口宽度下恰好等于最小尺寸，在另一个宽度下恰好等于最大尺寸。这个计算器根据这四个数字算出该值，显示常见屏幕宽度下得到的尺寸，并检查 vw 单位带来的 WCAG 文字缩放问题。

使用方法

1. 输入最小和最大尺寸，并选择单位是 px 还是 rem。
2. 输入每个尺寸适用的视口宽度。
3. 选择结果使用 rem（推荐）还是 px，并填写属性名。
4. 复制这行 CSS；在“更多尺寸”中添加更多行，可得到一组 CSS 变量。

计算公式

slope = (max − min) ÷ (vw₁ − vw₀) · intercept = min − slope × vw₀ · clamp(min, intercept + slope × 100vw, max)

尺寸先换算成 px（rem × 根字号），截距再换回 rem 作为结果。在两个宽度之间，尺寸沿直线变化；超出这个范围，clamp() 保持最小值或最大值。

示例

从 320 px 时的 16 px 到 1280 px 时的 24 px：斜率 = 8 ÷ 960 = 0.008333，所以 vw 部分是 0.8333vw；截距 = 16 − 0.008333 × 320 = 13.33 px = 0.8333rem。结果是 clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)。在 768 px 的平板宽度下，得到 13.33 + 6.4 = 19.73 px。