clamp() 与 Fluid 尺寸

clamp() 可以用一条声明替代多段阶梯式 media query，适用于 font-size、padding、gap、height 等数值属性。

语法

clamp(MIN, PREFERRED, MAX)

浏览器会选择：

• 首选值太小时用 MIN
• 首选值太大时用 MAX
• 其余情况用 PREFERRED

示例：

h1 {
  font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

窄屏时标题至少 1.5rem；宽屏时最多 2.5rem；中间随视口宽度增长。

为什么 rem + vw 要组合

纯 vw 标题在手机上可能过小，在超宽屏上又可能过大。clamp() 里组合 rem 与 vw 可以：

• 用 rem 最小值保证 可读下限
• 用 rem 最大值设定 设计上限
• 用 vw 中间项实现 fluid 增长

字号模式 vs 间距模式

字号 clamp 影响文字节奏与换行；间距 clamp 影响区块 gap、hero 内边距或组件高度。

数学相同，预览方式不同：

• 字号模式展示示例文字的计算尺寸
• 间距模式展示计算高度的条块

交付前应在最小、中间、最大视口宽度下都预览一次。

从设计规格到 CSS

典型流程：

1. 设计师给出移动端与桌面端的最小/最大 px 尺寸。
2. 选择与设计断点一致的视口范围。
3. 生成 clamp(minRem, preferredRem + preferredVw, maxRem)。
4. 将 CSS、自定义属性或 SCSS 变量复制进 tokens。

输出示例：

--heading-lg: clamp(1rem, 0.5rem + 2vw, 1.5rem);

何时不必用 clamp()

• 必须在某一断点精确切换以触发布局重排
• 容器查询下规则差异很大
• 简单 rem 令牌已足够

clamp() 最适合在已知上下限之间平滑缩放。

关键结论

把 clamp() 理解为 有边界的 fluid 尺寸：最小可读、最大设计上限，中间由视口驱动。

在 CSS 单位换算 / Clamp 生成器 的 Clamp Tab 中生成并预览，再写入样式表。