MATERI 12 / 20
CSS responsif: tahan layar sempit dan teks panjang
Responsif berarti isi tetap dapat dipakai ketika ruang berubah. Menguji lebar ponsel saja belum cukup jika nama panjang, zoom atau jumlah item bisa memecahkan layout.
Pahami kotak dan batasnya
Ukuran elemen dipengaruhi isi, padding, border dan aturan box-sizing. Lebar tetap yang cocok di laptop dapat melebihi viewport ponsel. Gunakan batas maksimum untuk kontainer dan biarkan isi mengalir. Pada grid atau flex, minimum size bawaan anak kadang perlu diatur agar teks panjang bisa menyusut dan membungkus.
Breakpoint mengikuti isi
Mulai dengan satu kolom yang dapat dibaca. Tambahkan kolom ketika ruang memang cukup, bukan karena nama perangkat tertentu. Grid dengan minmax membantu menyatakan batas kolom. Gambar perlu mengikuti kontainer dan mempertahankan rasio. Untuk kode atau tabel lebar, sediakan area gulir tersendiri agar seluruh halaman tidak ikut melebar.
Uji keadaan yang menekan layout
Coba teks judul dua kali lebih panjang, daftar kosong, banyak item dan zoom. Periksa apakah tombol masih terbaca dan fokus keyboard terlihat. Jangan memperbaiki overflow hanya dengan menyembunyikan isi yang dibutuhkan. Cari elemen pertama yang melebihi batas kontainer dan perbaiki aturan ukurannya.
.container { width: min(100% - 2rem, 72rem); margin-inline: auto; }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { min-width: 0; overflow-wrap: anywhere; }
img { max-width: 100%; height: auto; }
@media (max-width: 40rem) { .cards { grid-template-columns: 1fr; } }Giliran kamu.
Buat dua kartu dengan satu judul sangat panjang. Periksa pada 360, 768 dan 1440 piksel serta zoom 200%. Catat elemen yang pertama menyebabkan overflow.
- Kontainer tidak melebihi viewport
- Teks panjang tetap bisa dibaca
- Zoom dan fokus keyboard diperiksa