工具能做什么
它把最小尺寸、最大尺寸和视口范围转换成 CSS clamp() 值,展示结果在常见屏幕宽度下的渲染效果,并以纯 CSS、自定义属性或 Tailwind 类名的形式导出。字号比例模式可以生成整套模块化比例,间距模式则为 padding、margin 和 gap 提供同样的功能。
适合哪些人
想要可靠的 clamp() 值、又不想打开电子表格的前端开发者;需要交付响应式字体规范的设计师;以及正在用流式令牌搭建设计系统的团队。每个页面的说明都力求让初学者能看懂其中的数学,而有经验的开发者可以直接复制结果继续工作。
技术实现
网站使用 Next.js 静态生成,完全在你的浏览器中运行。没有账号、没有数据库,也没有服务器端处理;你输入的数值只存在于页面网址中。计算逻辑是一个经过单元测试的小型 TypeScript 模块,网站提供七种语言。
反馈
FluidClamp 与 ContrastCheck、宽高比计算器等其他免费网页工具一起维护。如果你发现了错误,或某处翻译读起来不够自然,欢迎通过项目的 GitHub 仓库反馈。