Toollet
ค้นหาด้วยสิ่งที่ต้องการทำหรือชื่อแอปค้นหาติดต่อเรา
ราคา
เมนู
เข้าสู่ระบบราคา

เครื่องมือสร้าง CSS clamp

กรอกความกว้างหน้าจอและขนาดสำหรับหน้าจอขนาดเล็กและขนาดใหญ่ เพื่อสร้าง CSS ที่เปลี่ยนขนาดตัวอักษรหรือระยะห่างอย่างลื่นไหล ดูตัวอย่างเอาต์พุตหน่วย px หรือ rem จากนั้นคัดลอก CSS และโค้ด Tailwind หรือบันทึกเป็นข้อความ

กรอกความกว้างหน้าจอและขนาดที่ความกว้างนั้น

ขนาดบนหน้าจอขนาดเล็ก

ขนาดบนหน้าจอขนาดใหญ่

การตั้งค่าขั้นสูงrem · อ้างอิง 16px

ขนาดกรอกเป็นหน่วย px เอาต์พุตใช้ 1rem = 16px

ผลลัพธ์ที่สร้างขึ้น

กด “สร้าง CSS” เพื่อแสดงโค้ดและตัวอย่างที่นี่

คุณทำอะไรได้

ระบุความกว้างและขนาด 2 คู่

ระบุขนาดสำหรับวิวพอร์ตขนาดเล็กและขนาดใหญ่ รองรับ 6 ประเภท ได้แก่ ขนาดฟอนต์ ช่องว่าง ระยะใน ระยะนอก ความกว้าง และความสูง

สร้างโค้ดเป็น px หรือ rem

ป้อนค่าทั้งหมดเป็น px และเลือก px หรือ rem สำหรับผลลัพธ์ คุณจะได้รับคำประกาศ CSS และโค้ด arbitrary property ของ Tailwind

ตรวจสอบ CSS ที่สร้างได้ทันที

ใช้ CSS กับสององค์ประกอบในตัวอย่าง ตรวจสอบว่าข้อความและช่องว่างแสดงผลอย่างไรที่ความกว้างเฟรมปัจจุบัน

วิธีใช้งาน

  1. เลือกคุณสมบัติที่จะเปลี่ยน

    เลือกคุณสมบัติ CSS ที่ต้องการระบุ เช่น font-size สำหรับขนาดข้อความ หรือ gap สำหรับระยะห่างระหว่างองค์ประกอบ

  2. ป้อนความกว้างวิวพอร์ตและขนาดสองค่า

    ป้อนความกว้างวิวพอร์ตทั้งสองค่าและขนาดของแต่ละค่าเป็น px ขนาดของวิวพอร์ตที่น้อยกว่าต้องไม่เกินขนาดของวิวพอร์ตที่มากกว่า

  3. ตรวจสอบหน่วยผลลัพธ์และสร้าง

    เลือก px หรือ rem ในการตั้งค่าขั้นสูง หากใช้ rem ให้ตรวจสอบขนาดฟอนต์ฐานก่อนกด “สร้าง CSS”

  4. ดูตัวอย่างและรับโค้ด

    คัดลอก CSS แล้ววางในตำแหน่งที่จะใช้ เปิดโค้ด Tailwind เพื่อดึงมา คุณยังคัดลอกทั้ง 2 รายการพร้อมกันหรือบันทึกเป็นข้อความได้

มีประโยชน์กับ

ปรับขนาดหัวข้ออย่างลื่นไหล

เมื่อคุณต้องการกำหนดขนาดข้อความสำหรับวิวพอร์ตที่แคบและกว้าง แล้วให้เปลี่ยนแบบต่อเนื่องระหว่างความกว้างทั้งสองนั้น แทนที่จะเปลี่ยนเป็นขั้น ๆ

ปรับระยะให้เข้ากับวิวพอร์ต

เมื่อคุณต้องการให้ช่องว่างระหว่างการ์ดหรือระยะในเปลี่ยนแปลงภายในขนาดต่ำสุดและสูงสุดที่คุณกำหนด

การระบุขนาดแบบไหลไปและการอ่านตัวอย่าง

ค่า 3 ตัวใน clamp

clamp คือฟังก์ชัน CSS ที่ระบุค่าต่ำสุด ค่าแบบไหลไป และค่าสูงสุด สูตรที่สร้างเชื่อมจุดอ้างอิงสองจุดด้วยนิพจน์เชิงเส้น และจำกัดขนาดนอกช่วงให้เท่ากับขนาดที่ปลายทั้งสองด้าน

ป้อนเป็น px ผลลัพธ์เป็น px หรือ rem

ทั้งความกว้างวิวพอร์ตและขนาดป้อนเป็น px สำหรับผลลัพธ์ที่เป็น rem ขนาดและพจน์คงที่จะถูกหารด้วยขนาดฟอนต์ฐาน ส่วนสัมประสิทธิ์ vw ของความกว้างวิวพอร์ตจะถูกใช้ตามเดิม

ให้ฐาน rem ตรงกับจุดที่ใช้โค้ด

โดยค่าเริ่มต้น โค้ดจะถือว่า 1rem เท่ากับ 16px หากขนาดฟอนต์ขององค์ประกอบรากต่างไปในจุดที่ใช้โค้ด ขนาดที่ปลายทั้งสองด้านและวิธีที่ขนาดเปลี่ยนก็จะต่างไปด้วย ตรวจสอบในจุดที่ใช้งานด้วย

กรอบตัวอย่างกำหนดความกว้างวิวพอร์ต

ตัวอย่างเป็นกรอบแสดงผลอิสระ จะคำนวณ vw จากความกว้างภายในกรอบ ไม่ใช่ความกว้างของหน้าจอทั้งหมด ขึ้นอยู่กับคุณสมบัติว่า CSS ที่สร้างเดียวกันจะถูกใช้กับข้อความ ช่องว่างระหว่างสององค์ประกอบ ระยะ หรือขนาดขององค์ประกอบ

ตรวจสอบในจุดที่ใช้โค้ดด้วย

ข้อความและโครงสร้างของตัวอย่างถูกกำหนดไว้คงที่ ให้ตรวจสอบฟอนต์ ข้อความยาว การตัดบรรทัด และการขยายข้อความของเบราว์เซอร์ในจุดที่ใช้โค้ดด้วย โค้ด Tailwind ใช้รูปแบบ arbitrary property ให้ตรวจสอบด้วยว่าตรวจพบและสร้างได้ในจุดที่ใช้งาน

คำถามที่พบบ่อย

จะเกิดอะไรขึ้นนอกช่วงความกว้างวิวพอร์ตที่ระบุ

ความกว้างที่แคบกว่าความกว้างที่ระบุค่าน้อยกว่าจะใช้ขนาดต่ำสุด ส่วนความกว้างที่กว้างกว่าความกว้างที่ระบุค่ามากกว่าจะใช้ขนาดสูงสุด สำหรับ rem คุณต้องใช้ขนาดฟอนต์ฐานเดียวกับตอนสร้างโค้ด

ขนาดฟอนต์ฐานสำหรับ rem คืออะไร

ค่านี้ระบุว่าใช้กี่ px ในการคำนวณ 1rem ค่าเริ่มต้นคือ 16px และคุณเปลี่ยนเป็น 1–1000px ได้ในการตั้งค่าขั้นสูง ให้ตรงกับขนาดฟอนต์ขององค์ประกอบรากที่คุณจะใช้โค้ด

ระบุขนาดที่เท่ากันหรือค่าติดลบได้หรือไม่

ตั้งค่าค่าต่ำสุดและค่าสูงสุดให้เท่ากันเพื่อให้ได้ขนาดคงที่ ค่าติดลบอนุญาตเฉพาะกับ margin และไม่รองรับขนาดที่ลดลงเมื่อวิวพอร์ตกว้างขึ้น

การเปลี่ยนคุณสมบัติหรือค่ามีผลทันทีหรือไม่

การเปลี่ยนค่าจะล้างโค้ดและตัวอย่างที่สร้างไว้ กด “สร้าง CSS” เพื่ออัปเดต เช่นเดียวกันเมื่อคุณเปลี่ยนหน่วยผลลัพธ์หรือขนาดฟอนต์ฐาน

เปลี่ยนข้อความในตัวอย่างได้หรือไม่

ข้อความตัวอย่างและ Aa 123 ถูกกำหนดไว้คงที่ ไม่มีคุณสมบัติแก้ไขข้อความ ให้ตรวจสอบข้อความจริงและความกว้างการแสดงผลบนหน้าที่ใช้ CSS ที่สร้างด้วย

ข้อมูลที่ป้อนและผลลัพธ์

ความกว้างวิวพอร์ต
1–100000px ความกว้างวิวพอร์ตที่น้อยกว่าต้องน้อยกว่าค่าที่มากกว่า และรองรับทศนิยม
ขนาด
0–10000px เฉพาะ margin เท่านั้นที่ลดได้ถึง −10000px ขนาดของวิวพอร์ตที่น้อยกว่าต้องไม่เกินขนาดของวิวพอร์ตที่มากกว่า
ผลลัพธ์
คำประกาศ CSS และ arbitrary property ของ Tailwind บันทึกทั้ง 2 รายการเป็น css-clamp-generator.txt
ความแม่นยำ
สูตรที่สร้างใช้สัมประสิทธิ์ที่มีนัยสำคัญได้สูงสุด 13 หลัก จะเกิดข้อผิดพลาดเมื่อความกว้างใกล้กันมากจนสูตรที่ปัดเศษแล้วไม่สามารถทำซ้ำจุดอ้างอิงได้ เช่น

การตั้งค่าปัจจุบัน

ค้นหาเครื่องมือ