การ์ดแคลมป์

ในการสาธิตนี้ คุณกำลังตั้งค่าความกว้างโดยใช้ 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 เพื่อให้พอดีกับความกว้างของวิวพอร์ต

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

HTML

<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>

CSS

        .parent {
  display: grid;
  place-items: center;
}

.card {
  width: clamp(23ch, 60%, 46ch);
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

.visual {
    height: 125px;
    width: 100%;
  }