เครื่องกำเนิดแคลมป์ระยะห่างของของไหล ()
คำนวณค่าแคลมป์ CSS ของเหลวจริงจากขนาดขั้นต่ำและขนาดสูงสุดบนความกว้างวิวพอร์ตสองรายการ โดยจะแสดงความชันและจุดตัดกันทีละขั้นตอน พร้อมแสดงตัวอย่างการปรับขนาดแบบเรียลไทม์
ผลลัพธ์
CSS clamp() ทำงานในลักษณะเดียวกันทุกประการในการเว้นวรรคเช่นเดียวกับขนาดตัวอักษร คุณสมบัติเป็นเพียงระยะขอบ การเติม หรือช่องว่าง แทนที่จะเป็นขนาดตัวอักษร หน้านี้จะเปิดเครื่องคิดเลขที่มีช่วง 8px ถึง 32px ในวิวพอร์ต 320px ถึง 1280px ซึ่งเป็นขั้นตอนทั่วไปสำหรับการเติมส่วนหรือช่องว่างของการ์ดที่ควรรู้สึกแน่นบนโทรศัพท์และมีพื้นที่กว้างขวางบนเดสก์ท็อปโดยไม่ต้องมองเห็นข้อความค้นหาสื่อ
คณิตศาสตร์พื้นฐานไม่สนใจว่าตัวเลขจะแสดงถึงอะไร: ความชันเดียวกันและสูตรจุดตัดของแกน y ที่สร้างขนาดส่วนหัวของไหลจะสร้างค่าระยะห่างของของไหล ดังนั้นรายละเอียดด้านล่างจะแสดงอย่างชัดเจนว่า 8px และ 32px กลายเป็นเส้น Clamp() ที่พร้อมทำสำเนาสำหรับช่องว่างภายใน: clamp(...)
ลากแถบเลื่อนความกว้างของวิวพอร์ตเพื่อดูตัวอย่างความรู้สึกของระยะห่างที่ความกว้างใดๆ ระหว่างเบรกพอยต์ทั้งสอง ปรับค่าต่ำสุดและสูงสุดสำหรับช่วงที่แคบลงหรือหลวมลง และคัดลอกเส้นที่เสร็จแล้วลงในคุณสมบัติระยะห่างที่ต้องการโดยตรง