Min-Width dan Max-Width

Nilai tetap bersifat semua-atau-tidak-sama-sekali: lebar 200px kekecilan di layar lebar dan kebesaran di ponsel. Property min-width dan max-width menawarkan pendekatan lain — alih-alih satu angka, kita mendefinisikan rentang yang diperbolehkan dan membiarkan browser memilih ukuran terbaik di dalamnya. Dua property ini menjadi fondasi berbagai pola responsif: gambar yang tidak meluber, kolom teks yang nyaman dibaca, dan wadah utama yang menyesuaikan layar. Chapter ini membahas semuanya beserta aturan prioritasnya.

Membatasi Ukuran dengan Rentang #

max-width memasang batas atas, min-width memasang batas bawah. Elemen tetap menghitung lebarnya seperti biasa (auto atau nilai tertentu), lalu hasilnya dipangkas atau dinaikkan agar berada di dalam rentang:

Pola pikirnya bergeser dari “berapa lebar elemen ini” menjadi “berapa lebar yang masih masuk akal untuk elemen ini”. Browser menyelesaikan sisanya.

Demo berikut menaruh kartu yang sama di dua ruang berbeda — kartunya diberi max-width: 320px dan dipusatkan:

Kartu mengambil nilai terbaik di dalam rentang yang diizinkan — itulah kerja max-width.

max-width: 100% untuk Gambar #

Pola paling terkenal di dunia CSS responsif:

img {
  max-width: 100%;
  height: auto;
}

Dua deklarasi ini membuat gambar menyusut mengikuti lebar kolomnya bila gambar lebih besar dari kolom, tetapi tidak pernah dipaksa membesar melewati ukuran aslinya — itulah bedanya dengan width: 100%. Tanpa pasangan ini, satu gambar besar cukup untuk merusak tata letak halaman ponsel. Pembahasan menyeluruhnya menanti di section Images dan Media.

Kolom Teks yang Nyaman: max-width: 65ch #

Baris teks yang terlalu panjang melelahkan mata karena sulit menemukan awal baris berikutnya. Unit ch mengukur lebar karakter “0” pada font yang sedang dipakai, sehingga max-width: 65ch membatasi paragraf pada sekitar 65 karakter per baris — titik tengah dari rentang nyaman 45-75 karakter:

.artikel-utama {
  max-width: 65ch;
}

Demo berikut menampilkan dua kolom 65ch dengan ukuran font berbeda — panjang barisnya sama, lebar pikselnya mengikuti font:

min-width: Mencegah Elemen Terlalu Sempit #

Kebalikannya sama pentingnya. Tombol yang isinya menyempit hingga teksnya pecah dua baris, atau input pencarian yang tinggal selebar satu huruf, membuat halaman sulit dipakai. min-width menetapkan lantai terendah:

.tombol-lapor {
  min-width: 140px;
}

Batas ini tetap berlaku bahkan ketika elemen berada di dalam layout yang menekannya.

Saat min dan max Bertabrakan #

Bila elemen melanggar kedua batas sekaligus, browser memihak minimum: nilai min dipertahankan, nilai max dikesampingkan. Contohnya min-width: 300px dan max-width: 200px pada elemen yang sama menghasilkan lebar 300px. Hal yang sama berlaku terhadap width biasa — min-width mengalahkan width yang lebih kecil. Kasus ini jarang ditulis sengaja, tetapi memahaminya menjelaskan banyak perilaku layout yang tampak menolak angka yang kita tulis.

.kotak-ujian {
  min-width: 300px;
  max-width: 200px; /* kalah: minimum tetap dipertahankan */
}

Demo berikut menyandingkan dua kotak — satu hanya dibatasi max, satu lagi dengan min dan max yang bertabrakan:

Teaser: Wadah Terpusat #

Gabungan max-width dan margin otomatis menghasilkan salah satu pola yang paling banyak dipakai di web — wadah utama yang menyesuaikan layar tetapi berhenti pada lebar maksimal, lalu berada tepat di tengah:

.wadah-utama {
  max-width: 960px;
  margin-inline: auto;
}

Pola ini kita bedah tuntas pada section Pola Layout.

Kesalahan Umum #

Ringkasan #

min-width dan max-width mengubah ukuran tetap menjadi rentang: gambar diamankan dengan max-width: 100%, teks dibatasi pada 65ch, tombol dijaga dari kesempitan, dan wadah utama halaman tumbuh sampai batas lalu terpusat. Ketika kedua batas dilanggar, minimum yang dipertahankan browser. Chapter-chapter berikutnya melengkapi perangkat nilai ini — termasuk function penghitung seperti calc() — hingga chapter penutup section ini, Memilih Unit yang Tepat.