เครื่องคิดเลข Fluid Typography (clamp()) สำหรับ CSS Layouts
เครื่องคิดเลขนี้สร้างค่า clamp() ของ CSS ที่ปรับขนาดได้อย่างลื่นไหลระหว่างขนาดต่ำสุดและสูงสุดตามช่วง viewport ที่คุณเลือก ค่าหลักใช้การประมาณค่าเชิงเส้นมาตรฐาน ผลลัพธ์จึงขยายหรือย่อตาม viewport แต่ไม่เกินขอบเขตที่กำหนด ใช้สไลเดอร์สดเพื่อดูขนาดที่คำนวณได้ที่ความกว้าง viewport ต่าง ๆ
เครื่องคิดเลข Fluid Typography (clamp()) สร้างค่า clamp() ของ CSS แบบ responsive สำหรับขนาดที่ควรปรับตาม viewport ป้อนขนาดต่ำสุด ขนาดสูงสุด และช่วง viewport แล้วใช้เครื่องคิดเลขสร้างค่าหลักจากการประมาณค่าเชิงเส้นมาตรฐาน สไลเดอร์ช่วยให้คุณดูตัวอย่างขนาดที่ได้ที่ความกว้าง viewport ต่าง ๆ
ค่า clamp() ที่ได้จะถูกตรึงไว้ระหว่างต่ำสุดและสูงสุด ขณะที่ปรับได้อย่างลื่นไหลตลอดช่วง viewport วิธีนี้ใช้ได้กับ font-size, padding, margin, gap และพร็อพเพอร์ตี้ CSS อื่น ๆ ที่รับค่าความยาว คุณสามารถปรับอินพุตและตัวเลือกที่มีเพื่อดูว่าผลลัพธ์เปลี่ยนอย่างไร คำอธิบายของเครื่องคิดเลขไม่ได้ระบุชื่อตัวเลือกแต่ละรายการ
CSS clamp() มีประโยชน์เมื่อค่าความยาวคงที่ไม่ยืดหยุ่นพอ แต่ค่าลื่นไหลที่ไม่จำกัดอาจโตหรือหดเกินขอบเขตที่ตั้งใจ เครื่องคิดเลขช่วยคุณสร้างค่าที่มีขอบล่างและขอบบนชัดเจน ทำให้วางแผนและตรวจสอบ typography และระยะห่างแบบ responsive ได้ง่ายขึ้น
เครื่องคิดเลขทำงานในเบราว์เซอร์ของคุณทั้งหมด อินพุตของคุณประมวลผลบนอุปกรณ์และไม่ถูกอัปโหลด จัดเก็บ หรือส่งไปยังเซิร์ฟเวอร์ เพราะไม่มีการพึ่งพาเซิร์ฟเวอร์ จึงใช้งานออฟไลน์ได้หลังจากโหลดหน้าแล้ว
เครื่องมือนี้มีประโยชน์สำหรับนักพัฒนาและนักออกแบบที่ทำ CSS แบบ responsive รวมถึงทุกคนที่อยากตรวจสอบการคำนวณขนาดแบบลื่นไหลโดยไม่ต้องคำนวณด้วยมือ ใช้พรีวิวสดเพื่อดูว่าค่าทำงานอย่างไรที่ความกว้าง viewport ต่าง ๆ ก่อนนำไปใช้ในสไตล์ชีต
ขั้นตอนที่ 1: ป้อนขนาดต่ำสุดและสูงสุด พร้อมช่วง viewport สำหรับค่าลื่นไหลที่คุณต้องการคำนวณ
ขั้นตอนที่ 2: ปรับตัวเลือกที่มีให้เหมาะกับค่า CSS ที่คุณกำลังทำ
ขั้นตอนที่ 3: ใช้สไลเดอร์ viewport เพื่อดูตัวอย่างขนาดที่คำนวณได้ที่ความกว้างต่าง ๆ
ขั้นตอนที่ 4: อ่านค่า clamp() ที่ได้ แล้วนำไปใช้กับพร็อพเพอร์ตี้ CSS ที่รับค่าความยาว
กรณีการใช้งาน: คำนวณค่า clamp() สำหรับ fluid typography โดยไม่ต้องเปิดสเปรดชีต เครื่องคิดเลขจะสร้างค่าหลักให้คุณ
กรณีการใช้งาน: ตรวจสอบตัวเลข clamp() ที่คนอื่นแชร์มาแทนที่จะพึ่งพาการคำนวณที่ไม่ได้ตรวจทาน
กรณีการใช้งาน: ดูว่าผลลัพธ์เปลี่ยนอย่างไรเมื่อปรับค่าอินพุต และดูตัวอย่างขนาดที่ความกว้าง viewport ต่าง ๆ
กรณีการใช้งาน: สร้างค่า font-size แบบ responsive ที่ปรับระหว่างต่ำสุดและสูงสุดตาม viewport ที่เปลี่ยน
กรณีการใช้งาน: คำนวณค่า padding หรือ margin แบบลื่นไหลเพื่อให้ระยะห่างปรับได้อย่างนุ่มนวลภายในขอบเขตที่กำหนด
กรณีการใช้งาน: ทดลองค่า gap แบบ responsive สำหรับเลย์เอาต์ แล้วดูว่าขนาดที่คำนวณได้ทำงานอย่างไรที่ความกว้างต่าง ๆ