CSS · Bab 8

Desain Responsif

Membuat halaman yang nyaman di ponsel hingga desktop dengan meta viewport, pendekatan mobile-first, media query min-width, unit relatif, dan gambar yang tidak melebihi wadahnya.

Anggota Perpustakaan Pelita membuka katalog buku dari ponsel, tablet, dan laptop. Desain responsif membuat satu halaman yang sama nyaman di semua ukuran layar, tanpa membuat halaman terpisah untuk ponsel.

8.1 Meta Viewport

Tanpa tag berikut di <head>, browser ponsel umumnya menampilkan halaman seolah-olah layarnya selebar layar desktop, lalu mengecilkannya. Hasilnya huruf kecil sekali dan media query tidak bekerja sesuai harapan.

<meta name="viewport" content="width=device-width, initial-scale=1">

Jangan menambahkan user-scalable=no atau maximum-scale=1. Keduanya menghalangi pengguna memperbesar halaman, padahal sebagian pengguna membutuhkannya untuk membaca.

8.2 Mobile-first

Pendekatan mobile-first menulis gaya dasar untuk layar sempit lebih dulu (biasanya satu kolom), lalu menambahkan perubahan untuk layar yang lebih lebar. Tata letak paling sederhana menjadi bawaan, dan ponsel tidak perlu membatalkan gaya desktop. Arah sebaliknya (desktop dulu, lalu dikurangi dengan max-width) juga mungkin, tetapi biasanya menghasilkan lebih banyak aturan yang saling menimpa.

8.3 Media Query

Media query menerapkan sekelompok aturan hanya bila syaratnya terpenuhi:

/* Gaya dasar: semua layar, satu kolom */
.katalog {
  display: grid;
  gap: 12px;
}

/* Layar 600px ke atas: dua kolom */
@media (min-width: 600px) {
  .katalog { grid-template-columns: repeat(2, 1fr); }
}

/* Layar 900px ke atas: tiga kolom */
@media (min-width: 900px) {
  .katalog { grid-template-columns: repeat(3, 1fr); }
}

• Titik perubahan seperti 600px dan 900px disebut breakpoint. Pilih breakpoint di lebar tempat tampilan mulai terlihat janggal, bukan berdasarkan merek atau model perangkat.
• Tulis media query min-width berurutan dari kecil ke besar. Karena spesifisitasnya sama, aturan yang ditulis belakangan menang.

Di playground, media query mengikuti lebar kotak preview, bukan lebar jendela browser atau layarmu, karena preview adalah halaman kecil di dalam halaman. Jadi jumlah kolom di bawah ditentukan oleh lebar kotak preview. Lebar itu berubah bila jendela browser diubah ukurannya, tetapi tidak sama dengan lebar jendela. Tulisan dari .info::after di contoh ini hanya alat bantu demo agar kamu melihat breakpoint yang aktif; di halaman sungguhan, jangan membawa informasi lewat ::after (lihat Bab 2).

Untuk menguji halaman sendiri di Chrome, buka DevTools lalu aktifkan device toolbar (Ctrl+Shift+M, macOS: Cmd+Shift+M); browser lain punya fitur serupa dengan letak yang berbeda. Pilih lebar, misalnya 360px, 768px, dan 1280px. Setelah itu, uji juga di ponsel sungguhan.

8.4 Unit Relatif dan Huruf yang Lentur

Unit relatif membuat ukuran ikut menyesuaikan, sedangkan px selalu tetap:

• rem untuk ukuran huruf dan jarak, karena menghormati ukuran huruf pilihan pengguna.
• % dan max-width untuk wadah, sehingga wadah menyempit di layar kecil.
• vw untuk ukuran yang mengikuti lebar viewport (di playground: lebar preview).

Fungsi clamp(min, ideal, maks) membatasi nilai yang lentur. font-size: clamp(1.5rem, 6vw, 3rem) berarti ukuran ideal 6vw, tetapi tidak lebih kecil dari 1.5rem dan tidak lebih besar dari 3rem.

8.5 Gambar yang Tidak Melebihi Wadah

Gambar selebar 800px akan meluber di layar ponsel selebar 360px. Aturan ini mencegahnya:

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

max-width: 100% membuat gambar tidak pernah lebih lebar dari wadahnya, dan height: auto menjaga perbandingan sisinya. Atribut width dan height di HTML tetap ditulis: browser memakainya untuk menyiapkan ruang dengan perbandingan yang benar sebelum gambar dimuat.

Contoh berikut memakai /favicon.svg, berkas yang hanya ada di situs ini. Di proyekmu sendiri, ganti dengan gambar yang kamu simpan, misalnya gambar/sampul-buku.jpg.

Tabel lebar diperlakukan lain: bungkus dengan wadah overflow-x: auto (bab 5), agar tabel bisa digeser ke samping tanpa melebarkan seluruh halaman.

8.6 Ringkasan

• Tag meta viewport perlu ada di setiap halaman, dan jangan mematikan zoom.
• Mobile-first: gaya dasar untuk layar sempit, lalu tambahkan @media (min-width: …) dari breakpoint kecil ke besar.
• Pakai unit relatif (rem, %, vw) dan clamp() agar ukuran lentur.
• img { max-width: 100%; height: auto; } membuat gambar tidak melebihi wadah.