CSS Clamp响应式字号计算器
输入最小/最大字号与视口宽度，自动生成标准 clamp() 响应式字号表达式，并提供拖动视口滑块实时预览效果。
免费在线工具
Loading…
使用说明
- 在“最小字号 (px)”“最大字号 (px)”输入框填写字号的下限与上限。
- 在“最小视口宽度 (px)”“最大视口宽度 (px)”输入框填写希望字号开始/停止缩放的视口范围，如 375（手机）到 1440（桌面）。
- 页面会实时计算并展示
clamp(min, preferred, max)表达式，可点击“复制表达式”一键复制到剪贴板。 - 拖动下方“视口宽度”滑块，可实时预览不同视口宽度下的字号变化，滑块两侧会自动扩展出最小/最大视口之外约 200px 的可拖动范围，方便观察钳制到边界值的效果。
- 点击“加载示例数据”可快速填入 16px→32px、375px→1440px 的常见示例。
功能介绍
- 按业界通用的线性插值公式生成 CSS
clamp()表达式：斜率 = (最大字号 - 最小字号) / (最大视口 - 最小视口)，再换算为 vw + rem 的组合写法，保证视口等于最小宽度时字号恰好为最小值，视口等于最大宽度时恰好为最大值。 - 结果以 rem 为单位输出，同时展示斜率、vw 系数等中间计算数据，方便理解公式推导过程。
- 内置拖动视口宽度滑块的实时预览区，直观查看字号随视口变化、以及超出范围后被钳制在边界值的效果。
- 提供一键复制生成的 clamp 表达式，方便直接粘贴到 CSS 文件中使用。
使用场景
响应式标题字号
为页面 H1/H2 等标题设置随视口平滑缩放的字号，避免手机端过大或桌面端过小。
设计交付到前端的还原
设计稿给出手机与桌面两端的字号规格时，快速换算出对应的 clamp() 表达式交给前端使用。
组件库排版规范制定
为设计系统制定一套响应式字号 token，减少针对不同断点手写多套媒体查询的工作量。
验证现有 clamp 表达式效果
用滑块预览已有的字号设计在不同设备宽度下的实际显示效果，检查是否符合预期。
常见问题
为什么视口在最小/最大宽度之外，字号还是不变？
这正是 CSS clamp() 的语义：低于最小视口时字号被钳制在最小值，高于最大视口时钳制在最大值，只有在区间内才按线性插值变化，工具的预览滑块也遵循同样的逻辑。
生成的表达式里为什么同时有 vw 和 rem？
vw 部分让字号随视口宽度线性变化，rem 部分是计算出的截距（视口宽度为 0 时的理论值），两者相加才能保证在最小/最大视口处精确落在设定的字号上，这是业界标准写法。
最大字号可以小于最小字号吗？
工具会给出提示建议最大字号不小于最小字号，正常使用场景下字号应随视口增大而增大，如需反向缩放建议自行调整参数含义。
计算结果里的 rem 是基于什么根字号换算的？
默认按浏览器标准根字号 16px 换算，如果页面修改过 html 的 font-size，需要按实际根字号手动调整最终数值。