跳到正文
FluidClamp
语言: 简体中文

关于 FluidClamp

FluidClamp 是一款小巧的免费工具,面向希望使用流式字体和间距、又不想手动做代数运算的前端开发者和设计师。

工具能做什么

它把最小尺寸、最大尺寸和视口范围转换成 CSS clamp() 值,展示结果在常见屏幕宽度下的渲染效果,并以纯 CSS、自定义属性或 Tailwind 类名的形式导出。字号比例模式可以生成整套模块化比例,间距模式则为 padding、margin 和 gap 提供同样的功能。

适合哪些人

想要可靠的 clamp() 值、又不想打开电子表格的前端开发者;需要交付响应式字体规范的设计师;以及正在用流式令牌搭建设计系统的团队。每个页面的说明都力求让初学者能看懂其中的数学,而有经验的开发者可以直接复制结果继续工作。

技术实现

网站使用 Next.js 静态生成,完全在你的浏览器中运行。没有账号、没有数据库,也没有服务器端处理;你输入的数值只存在于页面网址中。计算逻辑是一个经过单元测试的小型 TypeScript 模块,网站提供七种语言。

反馈

FluidClamp 与 ContrastCheck、宽高比计算器等其他免费网页工具一起维护。如果你发现了错误,或某处翻译读起来不够自然,欢迎通过项目的 GitHub 仓库反馈。

常见问题

FluidClamp 免费吗?

是的,无需注册即可免费使用,也没有任何付费套餐。

生成的 CSS 可以用于商业项目吗?

可以。输出的只是普通的 CSS 数学表达式,你可以在任何地方使用,无需署名。

计算器可以离线使用吗?

页面加载完成后,所有计算都在本地运行,即使网络断开,工具也能继续使用。

支持哪些语言?

英语、简体中文、西班牙语、德语、法语、日语和葡萄牙语。可以通过页头的语言菜单切换。