Question 1

clamp() ใน CSS ทำอะไร?

Accepted Answer

clamp() ใน CSS ทำอะไร? clamp(MIN, VAL, MAX) เลือกค่าระหว่าง MIN กับ MAX หาก VAL เล็กกว่า MIN จะคืน MIN หากใหญ่กว่า MAX จะคืน MAX ไม่เช่นนั้นคืน VAL เหมาะสำหรับขนาดลื่นไหลที่ไม่เล็กหรือใหญ่เกินไป

Question 2

clamp() ต่างจาก min() และ max() อย่างไร?

Accepted Answer

clamp() ต่างจาก min() และ max() อย่างไร? min() เลือกค่าน้อยที่สุด max() เลือกค่ามากที่สุด และ clamp() รวมทั้งสอง: ยึดค่ากลางไว้ระหว่างขอบล่างและขอบบน clamp() คือหัวใจของตัวพิมพ์ลื่นไหล

Question 3

clamp() รองรับในทุกเบราว์เซอร์ไหม?

Accepted Answer

clamp() รองรับในทุกเบราว์เซอร์ไหม? รองรับ clamp(), min(), max() ในเบราว์เซอร์สมัยใหม่ทั้งหมดตั้งแต่ปี 2020 (Chrome 79+, Firefox 75+, Safari 13.1+)

Question 4

ควรใช้ขนาดวิวพอร์ตเท่าไรสำหรับตัวพิมพ์ลื่นไหล?

Accepted Answer

ควรใช้ขนาดวิวพอร์ตเท่าไรสำหรับตัวพิมพ์ลื่นไหล? ช่วงทั่วไปคือ 320px-1200px สำหรับเว็บทั่วไป หรือ 360px-768px สำหรับโปรเจกต์ mobile-first เมื่อเกิน vmax ขนาดจะคงที่ที่ค่าสูงสุด — เป็นเจตนา

Question 5

ใช้ clamp() กับระยะห่างได้ไหม?

Accepted Answer

ใช้ clamp() กับระยะห่างได้ไหม? ได้ แพดดิ้งและช่องว่างลื่นไหลใช้สูตรเดียวกัน: clamp(16px, 4vw, 48px) ระยะห่างลื่นไหลรักษาจังหวะระหว่างอุปกรณ์โดยไม่ต้องใช้ media query เพิ่ม

เครื่องคำนวณ Clamp

↔️ เครื่องคำนวณ Clamp

คู่มือฟังก์ชัน Clamp

Pro Tips

Frequently Asked Questions

สีไทย