CSS clamp() 生成器

CSS clamp() 生成器

构建一个流式 clamp() 值，让字号在两个视口宽度之间平滑缩放。

使用方法

在上方的输入框中填写您的数值。
点击“计算”即可立即查看结果。
使用“分享”按钮复制结果链接。

关于此计算器

本工具为流式排版生成响应式 CSS clamp() 函数——clamp(min, preferred, max)——其中 preferred 值是一个基于 vw 计算出的表达式，能让你的字号在最小和最大视口宽度之间平滑缩放，超出你设定的上下限后就停止放大或缩小。

前端开发者用它避免为了调整标题和正文字号而写一堆媒体查询断点，转而得到一条能平滑缩放的 CSS 规则。只需输入你的最小和最大字号以及视口范围，即可得到一条可以直接粘贴使用的 clamp() 规则。