Responsive design adalah keterampilan yang menentukan apakah sebuah situs terasa profesional pada semua perangkat. Course ini sudah membahas media query, unit fluid seperti clamp(), dan pola layout yang menyesuaikan diri. Chapter ini menyusun referensi resmi untuk tiga topik tersebut, sehingga ketika layout melebar atau menyempit di luar rencana, kamu tahu harus membuka halaman mana.
Referensi Utama Responsive Design #
| Sumber | URL | Paling baik untuk |
|---|---|---|
| web.dev Learn Design | web.dev/learn/design | Course utuh tentang desain responsif: breakpoint, tipografi, navigasi |
| MDN Responsive Design | developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design | Ringkasan konsep beserta kaitannya dengan layout CSS |
| MDN Media Queries | developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries | Referensi lengkap sintaks @media dan nilainya |
| MDN Container Queries | developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries | Styling komponen berdasarkan ukuran wadahnya |
Empat sumber ini menutup spektrum dari strategi hingga sintaks. web.dev cocok dibaca berurutan sebagai penyegaran materi; tiga halaman MDN bekerja lebih baik sebagai kamus yang dibuka per topik.
Satu prinsip yang memandu seluruh materi di atas: tulis aturan dasar untuk layar kecil terlebih dahulu, lalu tambahkan @media (min-width: ...) untuk layar yang lebih lebar. Pola mobile-first ini membuat setiap breakpoint menjadi tambahan, bukan pembatalan, sehingga stylesheet lebih mudah dibaca. Jangan lupa pula memastikan markup memuat tag <meta name="viewport"> dengan nilai width=device-width, initial-scale=1, karena tanpa itu browser seluler merender halaman seolah layarnya selebar desktop.
Memilih Media Query atau Container Query #
Keduanya menjawab pertanyaan berbeda, dan referensi di atas mengajak kamu memilih dengan sadar:
| Pertanyaan | Alat yang tepat |
|---|---|
| Bagaimana layout halaman pada layar kecil? | Media query |
| Bagaimana kartu ini tampil di kolom sempit? | Container query |
| Kapan sidebar harus turun ke bawah? | Media query pada breakpoint halaman |
| Kapan tombol perlu versi ringkas? | Container query pada komponen itu sendiri |
Container queries didukung seluruh browser modern dan menjadi pola baku untuk komponen yang dipakai berulang di lebar berbeda. Media query tetap menjadi alat utama untuk keputusan layout tingkat halaman.
/* Komponen yang menyesuaikan diri dengan ukuran wadahnya */
.panel-berita {
container-type: inline-size;
}
@container (min-width: 480px) {
.panel-berita .isi {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 16px;
}
}Demo berikut menjalankan aturan @container di atas pada dua wadah berbeda lebar:
Alur Kerja Menyegarkan Materi #
Ketika layout responsif tidak berperilaku sesuai rencana, jalankan urutan ini:
- Buka halaman MDN Media Queries dan periksa kondisi breakpoint yang ditulis.
- Uji dengan alat simulasi ukuran layar pada DevTools (dibahas di chapter Tools CSS).
- Bila masalah muncul pada komponen di dalam wadah, alihkan ke halaman MDN Container Queries.
Ringkasan #
web.dev Learn Design memberi strategi, sementara halaman MDN untuk responsive design, media queries, dan container queries menjadi kamus teknisnya. Pemilihan antara media query dan container query kini menjadi keputusan yang bisa kamu jelaskan, bukan tebakan. Chapter terakhir mengumpulkan tools CSS: DevTools, validator, linter, dan peta dukungan browser.