CSS Clamp()生成器

使用clamp()生成流式、响应式的CSS数值。在视口范围内于最小值与最大值之间平滑缩放。

最小尺寸 (px)最大尺寸 (px)最小视口 (px)最大视口 (px)

font-size: clamp(16px, 13.0909px + 0.9091vw, 24px);

如何使用本工具

1
Enter the minimum size in pixels (the value at and below your small viewport).
2
Enter the maximum size in pixels (the value at and above your large viewport).
3
Set the min and max viewport widths in pixels that define where scaling starts and stops.
4
Read the generated clamp() declaration and click Copy to paste it into your stylesheet.

CSS clamp(最小值, 首选值, 最大值)函数在让数值在范围内流畅缩放的同时，将其约束在边界之内。它非常适合响应式排版：字号随视口宽度平滑增长，而不会在断点处跳变。本工具会根据你的最小/最大字号和视口宽度，计算出正确的首选值公式。

Building fluid headings that grow from 24px on mobile to 48px on desktop without writing media-query breakpoints.
Setting responsive body copy that stays readable between a 320px phone and a 1200px laptop.
Scaling section padding or gap values fluidly so layouts breathe proportionally across screen sizes.
Replacing a stack of font-size overrides at 480px, 768px, and 1024px with one clamp() declaration.
Generating clamp() values for a design system so spacing and type scale consistently from one formula.
Quickly checking the px and vw math for a fluid value you sketched out in a design tool like Figma.

浏览器兼容性如何？▼

clamp()自2020年起在所有浏览器中均可使用：在生产环境中使用完全安全。