CSS clamp() 计算器

计算用于文本或间距流体尺寸的 CSS clamp() 值,该尺寸会在最小和最大视口宽度之间按比例变化。

示例:

工作原理

CSS 函数 clamp(min, 首选值, max) 可以定义一个随窗口宽度线性变化、同时保持在最小值和最大值之间的流体尺寸——非常适合无需媒体查询的响应式文本。该工具会自动以 vw 和 rem 为单位计算斜率和截距。

为什么使用 clamp() 而不是媒体查询?

clamp() 提供尺寸之间连续流畅的过渡,而不是在固定断点处的突然跳跃,这在所有中间屏幕宽度上呈现出更自然的效果。

为什么这些值用 rem 而不是 px 表示?

使用 rem 可以让尺寸在用户修改浏览器默认字号时保持成比例,相比固定像素值,这提高了可访问性。

100% 本地处理:计算完全在您的浏览器中通过 WebAssembly 完成,不会向任何服务器发送数据。