CSS clamp 流体字号生成器
根据最小/最大视口宽度与对应字号,自动计算并生成 CSS clamp() 函数,实现随视口平滑缩放的响应式流体字体,无需媒体查询。免费在线使用,浏览器本地运行,无需安装。
快速预设
px
px
px
px
px
输出单位:
CSS font-size
—
预览效果 视口: — px
流体排版让字体随视口平滑缩放,无需媒体查询断点。Fluid typography scales smoothly with the viewport.
当前字号: —
根据最小/最大视口宽度与对应字号,自动计算并生成 CSS clamp() 函数,实现随视口平滑缩放的响应式流体字体,无需媒体查询。免费在线使用,浏览器本地运行,无需安装。
先填写或调整「最小视口宽度」、「最大视口宽度」、「最小字号」、「最大字号」、「根字号 (root font-size)」,再使用「生成 clamp()」完成操作。可先用「最小视口宽度」中的示例 「320」熟悉输入格式,再替换成自己的数据。
「最小视口宽度」最小为 1,控件步长为 1。「最大视口宽度」最小为 1,控件步长为 1。「最小字号」最小为 1,控件步长为 0.5。请按字段标注的单位输入,先检查超出范围、空值和小数点,再核对结果。
先用最小示例验证,再将结果放回实际开发环境检查。语言版本、运行环境、编码和配置项可能与浏览器中的处理规则不同。
本页的主要处理逻辑在浏览器内执行。页面加载资源、打开外部链接,以及带外部地址的内容预览仍可能产生网络请求;“本地处理”并不表示整个网页完全没有网络活动。
先检查「最小视口宽度」、「最大视口宽度」、「最小字号」是否完整,以及格式、单位和当前选项是否匹配。重新执行「生成 clamp()」,查看页面的结果或错误提示;可先用少量数据定位问题。
CSS 容器查询生成器 · CSS 媒体查询生成器 · CSS 格式化 · Box Shadow 生成器 · 全部开发工具