เครื่องคิดเลข CSS Clamp()

CSS clamp(MIN, PREFERRED, MAX) ยอมให้ประกาศเดียวแทนที่สื่อสอบถามทั้งกอง: ค่าคงที่ที่ MIN ต่ำกว่าวิวพอร์ตเล็กสุด ที่ MAX เหนือวิวพอร์ตใหญ่สุด และปรับขนาดอย่างราบรื่นระหว่างนั้น ส่วนที่ยากคือพจน์ PREFERRED — นิพจน์ที่ขึ้นกับวิวพอร์ตเช่น 0.833rem + 0.833vw — ที่ไม่มีใครอยากคำนวณด้วยมือ เครื่องคิดเลขนี้คำนวณให้จริงจากตัวเลขสี่ตัว: ขนาดต่ำสุด ขนาดสูงสุด และความกว้างวิวพอร์ตที่แต่ละค่ามีผล

แสดงตัวเลขกลางทุกตัว ไม่ใช่แค่บรรทัดสุดท้าย: ความชัน (ค่าขนาดเพิ่มขึ้นกี่หน่วยต่อพิกเซลของวิวพอร์ต) ความชันเดียวกันแสดงเป็นสัมประสิทธิ์ vw และจุดตัดแกน y — ค่าคงที่ที่เพิ่มเข้ากับพจน์ vw เพื่อให้เส้นผ่านจุดสองจุดที่คุณระบุอย่างแม่นยำ ใครก็ตามที่วางค่า clamp() จากบทช่วยสอนโดยไม่เข้าใจก็สามารถดูและตรวจสอบเลขคณิตจริงได้ที่นี่

แถบเลื่อนความกว้างวิวพอร์ตควบคุมกล่องตัวอย่างสด ดังนั้นการปรับขนาด fluid จึงมองเห็นได้ ไม่ใช่แค่คำนวณ: ลากระหว่างจุดเปลี่ยนต่ำสุดและสูงสุดและดูข้อความตัวอย่างปรับขนาดตรงตามที่เกิดขึ้นขณะปรับขนาดหน้าต่างเบราว์เซอร์จริง บรรทัดผลลัพธ์และการแจกแจงอัปเดตทุกครั้งที่กดแป้น — สิ่งนี้จับคู่กับตัวแปลง px to rem ได้อย่างเป็นธรรมชาติเมื่อขนาดตัวอักษรฐานเองก็ต้องแปลงเช่นกัน

สลับไปยังโหมดสเกลตัวพิมพ์สำหรับระบบตัวพิมพ์ fluid เต็มรูปแบบในขั้นตอนเดียว: ป้อนขนาดฐานและอัตราส่วนโมดูลาร์ (1.125 ถึง 1.5) และรับหกขนาด — เล็ก, ฐาน, h4, h3, h2 และ h1 — แต่ละค่าคำนวณเป็นบรรทัด clamp() ของตัวเองระหว่างการขยายแบบนุ่มนวลสำหรับมือถือและอัตราส่วนเต็มสำหรับเดสก์ท็อป พร้อมคัดลอกเป็นบล็อก CSS custom properties