Kartu penjepit

Dalam demo ini, Anda menetapkan lebar menggunakan clamp() seperti berikut: width: clamp(<min>, <actual>, <max>).

Ini menetapkan ukuran min dan maks absolut, serta ukuran sebenarnya. Dengan nilai, nilainya dapat terlihat seperti ini:

.parent {
  width: clamp(23ch, 60%, 46ch);
}

Ukuran minimum di sini adalah 23ch atau unit 23 karakter, dan ukuran maksimum adalah 46ch, 46 karakter. Unit lebar karakter didasarkan pada ukuran font elemen (khususnya lebar glyph 0). Ukuran 'aktual' adalah 50%, yang mewakili 50% lebar induk elemen ini.

Yang dilakukan fungsi clamp() di sini adalah mengaktifkan elemen ini untuk mempertahankan lebar 50% hingga 50% lebih besar dari 46ch (di area pandang yang lebih luas), atau lebih kecil dari 23ch (di area pandang yang lebih kecil). Dalam video ini, tonton bagaimana lebar kartu ini meningkat ke titik maksimum terjepit dan menurun ke batas minimum saat induk meregangkan dan menyusut. Kemudian, tugas akan tetap di tengah di induk menggunakan properti tambahan untuk memusatkannya. Cara ini memungkinkan tata letak yang lebih mudah dibaca, karena teks tidak akan terlalu lebar (di atas 46ch) atau terlalu sempit dan sempit (kurang dari 23ch).

Anda dapat menggunakan teknik ini untuk menerapkan tipografi responsif. Contoh: font-size: clamp(1.5rem, 20vw, 3rem). Dalam hal ini, ukuran font judul akan selalu dibatasi antara 1.5rem dan 3rem, tetapi akan membesar dan menyusut berdasarkan nilai sebenarnya 20vw agar sesuai dengan lebar area pandang.

Ini adalah teknik yang bagus untuk memastikan keterbacaan dengan nilai ukuran minimum dan maksimum, tetapi ingat bahwa teknik ini tidak didukung di semua browser modern, jadi pastikan Anda memiliki pengganti dan lakukan pengujian.

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%;
  }