เครื่องมือสร้าง CSS clamp()
เครื่องมือสร้าง CSS clamp() ฟรี สร้าง fluid typography ที่ปรับขนาดตามหน้าจอ กำหนดค่า min, preferred, max พร้อมพรีวิว viewport ตั้งแต่ 320px ถึง 2560px รองรับหน่วย px, rem, vw คัดลอก CSS ได้ทันที
Loading tool...
เครื่องมือสร้าง CSS clamp() คืออะไร?
CSS clamp() Generator เป็นเครื่องมือสร้าง fluid typography แบบเห็นภาพ ฟังก์ชัน clamp(min, preferred, max) ของ CSS ให้ค่าปรับขนาดลื่นไหลตาม viewport โดยอยู่ภายในขอบเขตที่กำหนด เหมาะสำหรับ font size, spacing และขนาด container
ประโยชน์หลัก
- Typography ปรับขนาดตามหน้าจอ
- ไม่ต้องใช้ media query
- ปรับขนาดลื่นไหลระหว่างขอบเขต
- คัดลอก CSS ได้ทันที
กรณีการใช้งาน
- •Heading ปรับขนาดตามจอ
- •Body text แบบ fluid
- •Spacing ตาม viewport
- •งานออกแบบเว็บสมัยใหม่
วิธีใช้เครื่องมือสร้าง CSS clamp()
- ตั้งค่าต่ำสุด: ใส่ขนาด font ต่ำสุด (เช่น 16px) ที่ใช้บนจอแคบ
- ตั้งค่าที่ต้องการ: ใส่ค่าที่ปรับขนาดตาม viewport มักใช้หน่วย vw (เช่น 4vw)
- ตั้งค่าสูงสุด: ใส่ขนาด font สูงสุด (เช่น 32px) ที่ใช้บนจอกว้าง
- พรีวิวและคัดลอก: ลาก slider เพื่อดูผลลัพธ์ แล้วคัดลอกค่า clamp() ไปใช้
คุณสมบัติหลัก
- ตัวสร้าง clamp() แบบเห็นภาพพร้อมพรีวิวสด
- ใช้หน่วย px, rem, em, vw, vh และเปอร์เซ็นต์ผสมกัน
- พรีวิว viewport ตั้งแต่ 320px ถึง 2560px
- แสดงค่าพิกเซลที่คำนวณได้ที่ viewport ปัจจุบัน
- คัดลอก CSS snippet ได้ทันที
- ทำงาน 100% ฝั่ง client ไม่ส่งข้อมูลไปเซิร์ฟเวอร์