CSS Clamp() เครื่องคิดเลข
คำนวณค่าแคลมป์ CSS ของเหลวจริงจากขนาดขั้นต่ำและขนาดสูงสุดบนความกว้างวิวพอร์ตสองรายการ โดยจะแสดงความชันและจุดตัดกันทีละขั้นตอน พร้อมแสดงตัวอย่างการปรับขนาดแบบเรียลไทม์
ผลลัพธ์
CSS Clamp(MIN, PREFERRED, MAX) ช่วยให้การประกาศหนึ่งครั้งแทนที่คิวรี่สื่อทั้งสแต็ก: ค่าจะอยู่ที่ MIN ใต้วิวพอร์ตที่เล็กที่สุด ที่ MAX เหนือวิวพอร์ตที่ใหญ่ที่สุด และปรับขนาดได้อย่างราบรื่นระหว่างนั้น ส่วนที่ยากคือคำ PREFERRED ซึ่งเป็นนิพจน์ที่สัมพันธ์กับวิวพอร์ต เช่น 0.833rem + 0.833vw ซึ่งไม่มีใครต้องการได้รับด้วยมือ เครื่องคิดเลขนี้คำนวณตามจำนวนจริงจากตัวเลขสี่ตัว: ขนาดต่ำสุด ขนาดสูงสุด และความกว้างวิวพอร์ตที่ใช้แต่ละตัว
หมายเลขกลางทุกตัวจะแสดงขึ้น ไม่ใช่แค่บรรทัดสุดท้าย: ความชัน (จำนวนหน่วยขนาดที่ค่าเพิ่มขึ้นต่อพิกเซลของวิวพอร์ต) ความชันเดียวกันนั้นแสดงเป็นค่าสัมประสิทธิ์ vw และจุดตัดของแกน y ซึ่งเป็นค่าคงที่ที่บวกเข้ากับเทอม vw เพื่อให้เส้นผ่านจุดสองจุดที่คุณระบุไว้ทุกประการ ใครก็ตามที่วางค่า Clamp() จากบทช่วยสอนโดยไม่เข้าใจ จะสามารถดูและตรวจสอบเลขคณิตจริงได้ที่นี่
แถบเลื่อนความกว้างวิวพอร์ตขับเคลื่อนกล่องแสดงตัวอย่างแบบสด ดังนั้นสเกลของเหลวจึงมองเห็นได้ ไม่ใช่แค่คำนวณเท่านั้น แต่ยังลากระหว่างเบรกพอยท์ต่ำสุดและสูงสุด และดูข้อความตัวอย่างปรับขนาดได้ตรงตามที่ควรในขณะที่หน้าต่างเบราว์เซอร์จริงถูกปรับขนาด บรรทัดเอาท์พุตและการอัปเดตการแยกย่อยในทุกการกดแป้นพิมพ์ — ซึ่งจะจับคู่กับตัวแปลง px เป็น rem อย่างเป็นธรรมชาติ เมื่อขนาดฟอนต์พื้นฐานจำเป็นต้องแปลงด้วยเช่นกัน
สลับไปที่โหมดขนาดตัวอักษรสำหรับระบบการพิมพ์ของเหลวที่สมบูรณ์ในขั้นตอนเดียว: ป้อนขนาดพื้นฐานและอัตราส่วนโมดูลาร์ (1.125 ถึง 1.5) และรับหกขนาด — เล็ก, ฐาน, h4, h3, h2 และ h1 — แต่ละขนาดคำนวณเป็นเส้น Clamp() ของตัวเองระหว่างความก้าวหน้าบนมือถือที่นุ่มนวลกว่าและอัตราส่วนเดสก์ท็อปเต็ม พร้อมที่จะคัดลอกเป็นบล็อกของคุณสมบัติ CSS แบบกำหนดเอง