流体排版 clamp 生成

怎么用

1. 填写需要缩放的视口区间，例如 320px 到 1280px。
2. 填写小屏端与大屏端的字号，例如 16px 到 24px。
3. 设置根字号，工具据此把像素换算成 rem（默认 16px）。
4. 选择 rem 或 px 作为输出单位；rem 会跟随用户的浏览器字号设置。
5. 查看各个视口宽度下的计算字号，然后复制生成的 CSS。

常见用法

• 响应式标题 —— 一条声明替代三到四条断点覆盖规则。
• 设计交付 —— 把精确的 clamp() 字符串交给开发，而不是一段缩放描述。
• 无障碍检查 —— 确认小屏端字号没有低到难以阅读。
• 理解计算过程 —— 改变视口区间时观察斜率与截距如何变化。

常见问题

问：clamp() 中间那个值是什么意思？ 答：它是首选值，写成截距加视口相对斜率的形式，例如 0.5rem 加 1.5625vw。浏览器在任意宽度下先算出这个值，再用你设定的上下限把它夹住。

问：为什么推荐用 rem 而不是 px？ 答：rem 跟随根字号变化，读者在浏览器里调大默认字号时，你的排版也会跟着变大。px 输出会忽略这个偏好，对部分用户可能造成阅读困难。

问：超出视口区间后会怎样？ 答：clamp 会在小于最小视口时保持最小字号，在大于最大视口时保持最大字号。生成的回退代码用媒体查询为不支持 clamp() 的引擎复现同样的行为。