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年起在所有瀏覽器中均可使用：在生產環境中使用完全安全。