clamp() สำหรับ fluid typography ไม่ต้อง media query

clamp(min, preferred, max) เป็น CSS function ที่จำกัดค่าระหว่าง min และ max โดยใช้ preferred เป็นค่า dynamic

h1 {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
}

อ่านว่า: “ให้ font-size เป็น 4vw แต่ไม่น้อยกว่า 1.5rem และไม่เกิน 2.5rem”

ผลลัพธ์คือ typography ที่ scale แบบ fluid ตั้งแต่มือถือจนถึง desktop โดยไม่ต้องเขียน @media เลย

ใช้กับ padding, margin, gap ก็ได้:

.section {
  padding: clamp(2rem, 5vw, 6rem);
  gap: clamp(1rem, 3vw, 2rem);
}

เหมาะมากกับ layout ที่ต้องการ intrinsic responsive ไม่ต้องกำหนด breakpoint แบบ fixed