响应式字体计算器 - 最小/最大视口字号平滑缩放

clamp() 是 CSS 的数学函数，接收三个参数：最小值、首选值、最大值。语法为 clamp(MIN, VAL, MAX)。它会返回 VAL，但被限制在 MIN 和 MAX 之间。

用于字体时，VAL 通常包含视口单位 vw，使得字号随浏览器宽度线性缩放，同时被最小值和最大值限制，确保在极端屏幕尺寸下仍然可读。例如：clamp(16px, 3.6vw + 4.4px, 48px) 表示字号在 16px 到 48px 之间平滑缩放。

媒体查询在特定断点处跳跃式改变字号，而 clamp() 实现连续平滑的缩放。使用 clamp() 可以避免在断点之间字号"卡住"的问题，减少代码量，并让过渡更加自然流畅。两者也可以结合使用，获得更精细的控制。

最小视口通常设为移动端最小屏幕宽度（如 320px 或 360px），最大视口设为你设计稿的最大宽度（如 1200px、1440px 或 1920px）。

• 移动优先项目：320px ~ 1200px
• 平板优先项目：768px ~ 1440px
• 宽屏桌面项目：1024px ~ 1920px

px 更直观、计算简单，适合大多数场景。rem 相对于根元素字号，便于全局缩放和可访问性（用户调整浏览器默认字号时同步缩放）。

如果需要 rem 版本，可将 px 值除以 16（假设 1rem = 16px）。本工具默认使用 px 单位，您可手动转换后在 CSS 中使用 rem。

CSS clamp() 在现代浏览器中广泛支持，覆盖率超过 96%。支持 Chrome 79+、Firefox 75+、Safari 13.1+、Edge 79+。对于少量不支持的旧浏览器，字号会回退到首选值（VAL），通常仍能保持基本可读性。可以配合 @supports 使用渐进增强策略。

clamp() 可用于任何接受长度值的 CSS 属性，包括：

• 间距：padding、margin、gap — 实现响应式间距
• 尺寸：width、height — 弹性容器尺寸
• 行高：line-height — 随字号同步缩放
• 圆角：border-radius — 响应式圆角
• 标题：多级标题统一使用流体字号

流体排版是指字号随视口宽度连续变化的技术，无需为每个断点手动设置字号。其优势包括：

• 📉 减少 CSS 代码量和维护成本
• ✨ 在所有屏幕尺寸下获得最佳阅读体验
• 🎯 精确控制字号的上下限，避免极端情况
• 🔄 与响应式布局无缝配合，提升整体设计品质