Fluid Typography ด้วยฟังก์ชัน Clamp ของ CSS
Nuttavut Thongjor
CSS

เรียนรู้การใช้ฟังก์ชัน clamp เพื่อปรับขนาดตัวอักษรให้ยืดหยุ่นตามขนาดจอ

คำอธิบาย
ความคิดเห็น

clamp เป็นฟังก์ชันของ CSS ที่จะคืนค่ากลับเป็นค่าที่อยู่ในช่วงต่ำสุดและสูงสุดตามที่เราระบุ โดยมีรูปแบบการเรียกใช้คือ

CSS
1clamp(MIN, VAL, MAX)

โดยค่า MIN คือค่าต่ำสุด ฟังก์ชัน clamp จะไม่ทำการคืนค่าต่ำกว่าค่า MIN อย่างแน่นอน ในขณะที่ค่า MAX จะเป็นค่าสูงสุดที่สามารถคืนกลับได้จากฟังก์ชัน clamp ส่วนค่าของ VAL ใช้เป็นตัวกำหนดผลลัพธ์โดยค่าที่ clamp จะทำการคืนค่า VAL เมื่อค่า VAL มากกว่า MIN แต่น้อยกว่า MAX นั่นเอง

โดยสรุปแล้วฟังก์ชัน clamp คือฟังก์ชันที่ใช้เลือกค่าที่เป็นไปได้และอยู่ในขอบเขตของค่าสูงสุดและต่ำสุดตามสมการนี้

CSS
1max(MIN, min(VAL, MAX))

เมื่อเรากำหนดขนาดอักษรเป็น clamp(16px, 2.5vw, 28px) จึงหมายความว่า ณ. ขนาดหน้าจอใด ๆ จะใช้ขนาดตัวอักษรเป็น 2.5vw (2.5% ของความกว้างจอขณะนั้น) ก็ต่อเมื่อ 2.5vw มีขนาดมากกว่า 16px แต่น้อยกว่า 28px และจะใช้ขนาดอักษรเป็น 28px กรณีที่ 2.5vw มีขนาดมากกว่าหรือเท่ากับ 28px ในกรณีอื่นจะใช้ขนาดเป็น 16px แทนนั่นเอง