Mengatur lebar (width) dan tinggi (height) adalah hal dasar, tetapi berpotensi merusak tampilan di layar HP jika salah cara.
•
width / height : Mengatur ukuran elemen secara pasti (contoh: 500px).
•
max-width : Sangat penting untuk web responsif! Jika layar lebih kecil dari max-width, elemen akan otomatis mengecil mengikuti layar (tidak terpotong).
•
Contoh Kode
.kotak-responsif {
max-width: 500px; /* Maksimal 500px, tapi bisa mengecil di HP */
width: 100%; /* Penuhi layar yang tersedia */
height: 200px;
background-color: lightgreen;
}
Hasil Tampilan
Console Output
Tugas Praktik (Pertanyaan)
Untuk membuat website responsif, manakah yang lebih aman digunakan agar elemen bisa mengecil di layar HP: width atau max-width?