ตัวสร้าง CSS Clamp()

วิธีใช้เครื่องมือนี้

1. 1

   Enter the minimum size in pixels (the value at and below your small viewport).

2. 2

   Enter the maximum size in pixels (the value at and above your large viewport).

3. 3

   Set the min and max viewport widths in pixels that define where scaling starts and stops.

4. 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.

คำถามที่พบบ่อย