ในการสาธิตนี้ คุณกำลังตั้งค่าความกว้างโดยใช้ clamp()
ดังนี้ width: clamp(<min>, <actual>, <max>)
ซึ่งจะตั้งค่าขนาดต่ำสุดและสูงสุดสัมบูรณ์ รวมถึงขนาดจริง ซึ่งค่าอาจมีลักษณะดังนี้
.parent {
width: clamp(23ch, 60%, 46ch);
}
ขนาดขั้นต่ำคือ 23ch
หรือหน่วยอักขระ 23 ตัว และขนาดสูงสุดคือ 46ch
, 46 ตัว หน่วยความกว้างของอักขระขึ้นอยู่กับขนาดแบบอักษรขององค์ประกอบ (โดยเฉพาะความกว้างของรูปอักขระ 0
) ขนาด "จริง" คือ 50% ซึ่งแสดงถึง 50% ของความกว้างระดับบนสุดขององค์ประกอบนี้
ฟังก์ชัน clamp()
กำลังทำให้องค์ประกอบนี้คงความกว้าง 50% จนถึง 50% ที่มากกว่า 46ch
(ในวิวพอร์ตที่กว้างขึ้น) หรือต่ำกว่า 23ch
(ในวิวพอร์ตขนาดเล็ก) ในวิดีโอ ลองดูว่าความกว้างของการ์ดนี้เพิ่มขึ้นจนถึงจุดสูงสุดที่ถูกบีบและลดลงจนถึงระดับต่ำสุดที่ถูกบีบไว้อย่างไรเมื่อการ์ดหลักยืดออกและหดลง จากนั้นจะค้างอยู่ที่ระดับบนสุดโดยใช้คุณสมบัติเพิ่มเติมเพื่อจัดกึ่งกลาง ซึ่งจะช่วยให้เลย์เอาต์อ่านได้ชัดเจนมากขึ้น เนื่องจากข้อความจะไม่กว้างเกินไป (เหนือ 46ch
) หรือถูกบีบและแคบเกินไป (น้อยกว่า 23ch
)
คุณจะใช้เทคนิคนี้เพื่อใช้การพิมพ์ที่ปรับเปลี่ยนตามอุปกรณ์ได้ เช่น font-size: clamp(1.5rem, 20vw, 3rem)
ในกรณีนี้ ขนาดแบบอักษรของบรรทัดแรกจะถูกจำกัดอยู่ระหว่าง 1.5rem
ถึง 3rem
เสมอ แต่จะขยายและย่อตามค่าจริง 20vw
เพื่อให้พอดีกับความกว้างของวิวพอร์ต
วิธีนี้เป็นเทคนิคที่ยอดเยี่ยมเพื่อให้แน่ใจว่าค่าขนาดต่ำสุดและสูงสุดจะอ่านง่าย แต่อย่าลืมว่าเบราว์เซอร์สมัยใหม่บางอย่างไม่รองรับ ดังนั้นให้ตรวจสอบว่าคุณได้ใช้โฆษณาสำรองและทำการทดสอบ
<div class="parent">
<div class="card">
<h1>Title Here</h1>
<div class="visual"></div>
<p>Descriptive Text. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed est error repellat veritatis.</p>
</div>
</div>
.parent {
display: grid;
place-items: center;
}
.card {
width: clamp(23ch, 60%, 46ch);
display: flex;
flex-direction: column;
padding: 1rem;
}
.visual {
height: 125px;
width: 100%;
}