CSS clamp() 生成器
font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);各视口宽度下的计算尺寸
360px
16.3px
768px
19.7px
1024px
21.9px
1440px
24px
相关外部工具
部分链接为联盟营销链接。
相关工具
生成在视口范围内从最小尺寸到最大尺寸平滑缩放的 CSS clamp() 值，适合响应式排版和间距设计。输入尺寸后即可复制结果，并通过实时预览查看效果。所有操作在浏览器中完成。
使用方法
- 以像素设置最小和最大尺寸。
- 设置缩放所在的视口宽度范围。
- 复制生成的 clamp() 值，并在不同宽度下查看预览效果。
工作原理
工具在两点之间画一条直线：最小视口处的最小尺寸和最大视口处的最大尺寸。这条直线成为首选值，用 rem 偏移量加 vw 斜率表示。clamp() 将其锁定，使值永远不会低于最小值或超过最大值，从而在两个断点之间平滑缩放。
功能特点
真正的流体缩放
尺寸在断点之间平滑插值，而非通过媒体查询突然跳变。
rem + vw 输出
使用 rem 和 vw，尊重用户字体设置，保持无障碍性。
实时预览
查看常见视口宽度下的计算像素值。
自定义根字体
设置根字体大小，使 rem 值与您的项目保持一致。
一键复制
将完整的 font-size 声明直接复制到您的 CSS 中。
适用场景
流体排版
让标题和正文从移动端到桌面端平滑缩放。
间距与间隙
将同样的流体思路应用于 padding、margin 和网格间隙。
字体比例
构建随视口缩放的响应式字体比例系统。
保持一致性
用一个可预测的 clamp() 替代多层媒体查询。
注意事项
- 最大视口宽度必须大于最小视口宽度。
- 值基于根字体大小（默认 16px）使用 rem。
- 过陡的斜率会影响中间尺寸的可读性。
- 所有操作在您的设备上完成，不上传任何数据。
常见问题
- clamp() 有什么用？
- clamp(min, preferred, max) 将值限制在最小值和最大值之间，同时允许首选值在其间缩放，非常适合响应式尺寸设定。
- 比直接用 vw 好在哪里？
- 单独使用 vw 会无限缩小或放大。clamp() 设置了上下限，确保文字在极小和极大屏幕上都保持可读性。
- 为什么用 rem 而不是 px？
- rem 遵从用户浏览器的字体大小设置，比固定的 px 更有利于无障碍访问。
- 流体排版无障碍吗？
- 在保持合理最小值并避免极端斜率的前提下可以做到。使用 rem 还能让用户缩放文字。请务必测试缩放和大字体设置。
- 数据会发送到服务器吗？
- 不会。clamp() 值完全在浏览器中生成。