CSS Max & Min

Mengatur ukuran panjang dengan properti pembatas max & min

Pada materi sebelumnya telah dijelaskan bagaimana Mengatur width dan height suatu elemen, dimana pengaturan tersebut adalah untuk menentukan ukuran tetap suatu elemen.

Selanjutnya disini akan menjelaskan cara mengatur ukuran suatu elemen dengan cara memberikan batas ukuran pada elemen.

Ketentuan atribut pembatas max- & min- berlaku untuk atribut width dan height elemen.

min-width / min-height :
Berarti mengatur ukuran elemen dengan memberikan batas terkecil (minimal).
Sehingga ukuran suatu elemen bisa bertambah semaksimal mungkin sesuai elemen induknya.

max-width / max-height :
Berarti mengatur ukuran elemen dengan memberikan batas terbesar (maksimal). Sehingga ukuran elemen tidak bisa melebihi batas tersebut.

Fungsi penggunaan properti pembatas max- & min-

Properti min- & max- ini sangat penting dalam mendesain halaman web responsive. Yaitu :

Untuk menjaga area pandang halaman web (viewport) tidak melebar melebihi ukuran layar perangkat. Atau menyesuaikan lebar halaman secara otomatis agar konten dapat ditampilkan di perangkat apapun.

Lihat penjelasan tentang viewport.

<div class='screen'>
  <div class='konten'>
    <p>Ini paragraf konten.</p>
  </div>
</div>
<style>
.screen {width: 320px; border: 2px solid #333}
.konten {width: 380px;
         margin: 5px;
         border: 1px solid red
         }
</style>

Ini paragraf konten.

Contoh diatas menjelaskan layar perangkat berukuran width: 320px dengan lebar halaman width: 380px, maka yang terjadi adalah, viewport halaman tidak sesuai dengan lebar layar (screen).

Agar viewport sesuai dengan lebar layar, lebar halaman harus ditentukan seperti dibawah ini.

min-width

Nilai properti min-width didapatkan dengan cara:

1. Lebar halaman .konten (380px) disamakan dengan lebar .screen menjadi 320px
2. Kurangi margin halaman konten (kiri dan kanan) = (2 x 5px) = 10px,
3. Jadi 310px dikurangi border .screen 2px (kiri dan kanan) = 4px = 306px.
maka, min-width: 310px;

<div class='screen'>
  <div class='konten'>
    <p>Ini paragraf konten.</p>
  </div>
</div>
<style>
.screen {width: 320px; border: 2px solid #333}
.konten {min-width: 306px;
         margin: 5px;
         border: 1px solid red
         }</style>

Ini paragraf konten.