สร้าง CSS clamp() ฟรี
สร้างค่า CSS clamp() แบบ fluid สำหรับ typography และ spacing ที่ responsive กำหนดขนาดต่ำสุด/สูงสุดและช่วง viewport ดูตัวอย่างสดๆ และคัดลอก CSS บรรทัดเดียว
ขนาดที่แสดงผลที่ viewport ต่างๆ
clamp(min, preferred, max) ปรับค่าอย่างลื่นไหลตาม viewport แล้วล็อกที่ min และ max แทนที่ media queries หลายชั้นสำหรับ typography, spacing และ widths ด้วยบรรทัดเดียว
การใช้งานทั่วไป
- สร้างไทโปกราฟีตอบสนองที่คล่องตัวปรับขนาดขนาดตัวอักษรได้อย่างราบรื่นระหว่างมือถือและเดสก์ท็อปด้วยบรรทัดเดียว
- อัตราขอบและระยะห่างของไหลทำให้ระยะห่างของส่วนเพิ่มขึ้นจากวิวพอร์ตแทนที่จะกระโดดที่จุดแยก
- แทนที่ Media Queries ด้วย clamp()ยุบเก็บไฟล์ของการลบล้างจุดแยกลงในค่าของไหลเดียว
- สร้างมาตราส่วนประเภทของไหลสร้างขั้นตอน clamp() ที่สอดคล้องกันสำหรับมาตราส่วนประเภทระบบการออกแบบ
- ไทป์ฮีโร่และแสดงผลของไหลปรับขนาดหัวข้อหน้าแรกที่ใหญ่โตอย่างน่าประทับใจแต่ปลอดภัย
วิธีการทำงาน
เครื่องมือนี้คำนวณค่า CSS clamp() ด้วยสูตรการประมาณค่าเชิงเส้นที่เขียนขึ้นเอง — ไม่มีไลบรารี ไม่มีการเรียกเซิร์ฟเวอร์ คุณป้อนสองขนาดและสองความกว้าง viewport คณิตศาสตร์ทำงานทันทีในเบราว์เซอร์และสร้างนิพจน์ clamp() ที่พร้อมวาง พร้อมค่าที่ต้องการแบบ vw ที่ปรับขนาดตัวอักษรหรือระยะห่างอย่างราบรื่นระหว่างจุดแบ่งเหล่านั้น
- 1การคำนวณความชันเชิงเส้นเครื่องมือคำนวณความชันพิกเซลต่อพิกเซล: (maxSize - minSize) / (maxViewport - minViewport) ความชันนี้ถูกแปลงเป็นหน่วย vw โดยคูณด้วย 100 ซึ่งเป็นหัวใจของการปรับขนาดตาม viewport ใน CSS
- 2การหาจุดตัดค่าชดเชยจุดตัด (เป็น px หรือ rem) ถูกคำนวณให้ฟังก์ชันเชิงเส้นได้ขนาดต่ำสุดของคุณพอดีที่ viewport ต่ำสุด ความชันและจุดตัดรวมกันเป็นค่าที่ต้องการภายใน clamp() — ส่วนที่ปรับขนาดจริง
- 3การแปลงหน่วยและจัดรูปแบบผลลัพธ์หากเลือกผลลัพธ์เป็น rem ค่าพิกเซลทุกค่าจะถูกหารด้วยขนาดฟอนต์ราก (ค่าเริ่มต้น 16px) ก่อนเขียนลงในสตริง clamp() คลาส Tailwind แบบค่ากำหนดเองที่ตรงกันก็ถูกสร้างด้วย โดยแทนช่องว่างด้วยขีดล่างตามไวยากรณ์ของ Tailwind
- 4ตัวอย่างสดด้วยแถบเลื่อน viewportแถบเลื่อนให้คุณเลื่อนความกว้างตั้งแต่ 320px ถึง 1920px ในแต่ละตำแหน่ง สูตรความชันและจุดตัดเดียวกันจะคำนวณขนาดที่ถูก clamp แบบเรียลไทม์และแสดงข้อความตัวอย่างที่ขนาดพิกเซลนั้น คุณจึงเห็นพฤติกรรมการปรับขนาดก่อนคัดลอก
เครื่องมือที่เกี่ยวข้อง
ตัวสร้าง CSS Grid
ออกแบบ CSS grid ตามภาพ — tracks, units และ gaps — และคัดลอก CSS และ HTML ที่สร้างขึ้น
ความละเอียดหน้าจอของฉันคืออะไร
ดูความละเอียดหน้าจอของคุณในหน่วย CSS และพิกเซลจริง, ขนาดหน้าต่าง, อัตราส่วนพิกเซล, ความลึกของสี, HDR, การรองรับการสัมผัส และอัตรารีเฟรช และคัดลอกทั้งหมด
สร้างลายเซ็น
วาดลายเซ็นด้วยเมาส์ นิ้ว หรือสไตลัส หรือพิมพ์ชื่อด้วยฟอนต์ลายมือ แล้วส่งออกเป็น PNG หรือ SVG พื้นหลังโปร่งใส