Elysia Tools
导航
Design
输入最小/最大视口与字号边界，输出 clamp() 表达式、可复制 CSS 与实时预览数据
详情
根据视口与字号边界计算 fluid typography 的斜率和截距，输出可复制的 clamp() 与预览 HTML。
执行
填写表单、运行工具，并在同一页面查看结果。
案例
相关内容
等待运行
工具使用指南
本工具是专为前端开发者和网页设计师打造的 CSS 流体排版 Clamp 计算器。只需输入最小与最大视口宽度、最小与最大字号以及根字号，即可自动计算出精确的斜率与截距，并生成可直接复制的 CSS clamp() 表达式，帮助您轻松实现无缝响应式的字体缩放效果。
背景
正在开发一个响应式企业官网，需要让主标题（H1）在 360px 视口下为 24px，在 1440px 视口下平滑放大到 48px。
问题
手写媒体查询会导致代码冗长，且字号变化有突变感，不够平滑。
如何使用
在计算器中输入最小视口 360，最大视口 1440，最小字号 24，最大字号 48，根字号保持 16。
minViewportPx: 360, maxViewportPx: 1440, minFontPx: 24, maxFontPx: 48, rootFontPx: 16结果
获得 clamp(1.5rem, 1rem + 2.2222vw, 3rem) 表达式，直接应用于 H1 样式中，实现无缝平滑缩放。
背景
需要为博客文章的正文设置流体字号，在 768px 视口下为 16px，在 1920px 视口下为 20px。
问题
需要精确计算出符合比例的 vw 斜率，避免在大屏上文字过大或在平板上文字过小。
如何使用
输入最小视口 768，最大视口 1920，最小字号 16，最大字号 20，根字号 16。
minViewportPx: 768, maxViewportPx: 1920, minFontPx: 16, maxFontPx: 20, rootFontPx: 16结果
生成 clamp(1rem, 0.8333rem + 0.3472vw, 1.25rem)，确保正文在各种中大屏幕设备上都具备极佳的可读性。
clamp() 函数接收三个参数：最小值、首选值和最大值。它允许属性值在设定的范围内随着视口大小动态变化，超出范围时则锁定在最值。
混合使用 rem 和 vw 可以确保在视口缩放时字体平滑过渡，同时保留用户在浏览器中手动调整默认字号的可访问性。
根字号用于将输入的像素值（px）转换为相对单位（rem），通常浏览器的默认根字号为 16px。
支持。虽然主要用于流体排版，但生成的 clamp() 表达式同样适用于 padding、margin 等任何支持长度单位的 CSS 属性。
当视口小于最小视口时，字号将固定为设定的最小值；当视口大于最大视口时，字号将固定为设定的最大值。