เครื่องมือคำนวณ CSS clamp()
กรอกขนาดสำหรับหน้าจอขนาดเล็กและขนาดใหญ่ เพื่อรับค่า clamp() ที่ยืดหยุ่นและปรับขนาดอย่างนุ่มนวลระหว่างช่วงหน้าจอ สำหรับขนาดตัวอักษร, padding, margin หรือ gap
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)ผลลัพธ์ที่ได้จะคงส่วนที่เป็น rem ไว้ในพจน์กลาง ดังนั้นข้อความจะยังคงขยายใหญ่ขึ้นเมื่อผู้ใช้ซูมหน้าจอเป็น 200% ซึ่งต่างจากการใช้ค่า viewport เพียงอย่างเดียวที่จะไม่ขยายตาม
ข้อความยืดหยุ่น ปรับขนาดได้พอดี
การคำนวณทั้งหมดจะทำงานในเบราว์เซอร์ของคุณโดยตรง ไม่มีการอัปโหลดข้อมูลที่คุณกรอกที่นี่ไปยัง BroBroGo
คำถามที่พบบ่อย
เครื่องมือคำนวณสร้างค่า clamp() อย่างไร?
คุณกำหนดจุดอ้างอิงสองจุด ได้แก่ ขนาดบนหน้าจอขนาดเล็ก และขนาดบนหน้าจอขนาดใหญ่ เครื่องมือจะคำนวณเส้นตรงระหว่างสองจุดนี้เพื่อให้ขนาดปรับเพิ่มขึ้นอย่างนุ่มนวลเมื่อหน้าจอกว้างขึ้น จากนั้นจะครอบด้วยฟังก์ชัน clamp() เพื่อไม่ให้ขนาดลดลงต่ำกว่าค่าต่ำสุดหรือเพิ่มขึ้นเกินค่าสูงสุดที่คุณกำหนดไว้ ระหว่างความกว้างทั้งสองนี้ ขนาดจะปรับเปลี่ยนแบบยืดหยุ่น (Fluid) และเมื่ออยู่นอกช่วงดังกล่าวจะคงอยู่ที่ขีดจำกัดที่ใกล้ที่สุด
ทำไมผลลัพธ์จึงเป็นหน่วย rem และ vw แทนที่จะเป็นพิกเซล?
ขอบเขตจะถูกกำหนดเป็นหน่วย rem และส่วนกลางที่เปลี่ยนแปลงจะคงส่วนประกอบของ rem ไว้ เพื่อให้ข้อความยังคงขยายใหญ่ขึ้นเมื่อผู้อ่านซูมเข้าหรือเพิ่มขนาดตัวอักษรเริ่มต้นของเบราว์เซอร์ ซึ่งการใช้หน่วยพิกเซลหรือ viewport เพียงอย่างเดียวอาจทำให้ฟังก์ชันนี้ไม่ทำงาน ที่คุณกรอกขนาดเป็นพิกเซลเนื่องจากเป็นหน่วยที่เข้าใจง่ายที่สุด และเครื่องมือจะแปลงเป็น rem โดยอิงตามขนาดตัวอักษรรูท (Root font size) ของคุณ
สามารถใช้ค่านี้กับระยะห่าง (Spacing) แทนขนาดตัวอักษรได้หรือไม่?
ได้แน่นอน คุณสามารถใช้ค่าเดียวกันนี้กับ padding, margin, gap, width หรือ height หรือที่ใดก็ตามที่ใช้กำหนดระยะได้ ลองสลับโหมดพรีวิวเป็น Box เพื่อดูการขยายตัวของระยะห่างแทนข้อความ หากขนาดเล็กสุดและใหญ่สุดของคุณเท่ากัน ผลลัพธ์จะลดรูปเหลือเพียงค่าความยาวคงที่ธรรมดา เนื่องจากไม่มีความจำเป็นต้องปรับขนาด
เบราว์เซอร์ทั้งหมดรองรับ clamp() หรือไม่?
ได้ เบราว์เซอร์ปัจจุบันทั้งหมดรองรับ clamp() มาตั้งแต่ปี 2020 ดังนั้นคุณจึงสามารถนำค่านี้ไปใช้งานได้ทันทีโดยไม่ต้องมี fallback อย่างไรก็ตาม หากตั้งค่าสูงสุดไว้สูงมากหรือมีอัตราการเปลี่ยนแปลงที่รวดเร็ว ควรตรวจสอบด้วยการซูม 200% เพื่อให้แน่ใจว่าข้อความยังคงขยายใหญ่ขึ้นสำหรับผู้อ่านที่จำเป็นต้องใช้