Belajar CSS - Layout Responsif dengan Media Query
Episode ini membahas layout responsif dengan media query: sintaks dasar dan operator, breakpoint yang umum dipakai, pendekatan mobile-first versus desktop-first, serta pola perubahan layout yang mulus di berbagai ukuran layar.
#Pendahuluan
Halaman yang sama harus nyaman dilihat di ponsel 360px maupun monitor 1920px. Media query adalah gerbang utama untuk itu: aturan CSS yang hanya berlaku ketika kondisi tertentu terpenuhi, paling sering lebar viewport. Episode 8 membangun layout Grid dua dimensi. Episode 9 mengajarkan cara mengubah layout tersebut pada ukuran layar berbeda — kolom yang menyusut, menu yang berubah, teks yang menyesuaikan diri. Mengapa penting? Statistik menunjukkan mayoritas trafik web kini berasal dari perangkat seluler. Halaman yang tidak responsif membuat pengguna mengecilkan-zoom dan akhirnya pergi. Media query adalah keterampilan wajib, bukan pelengkap.
#Sintaks Dasar Media Query
Media query menempel pada blok aturan dan mulai berlaku saat kondisinya cocok:
@media (max-width: 768px) {
.layout {
grid-template-columns: 1fr;
}
}Aturan di atas aktif ketika viewport maksimal 768px lebar. min-width dan max-width adalah kondisi yang paling sering dipakai, dan keduanya bisa digabung dengan and:
@media (min-width: 600px) and (max-width: 1024px) {
.menu-samping {
display: none;
}
}
@media (min-width: 1024px), (orientation: landscape) {
.hero {
flex-direction: row;
}
}Operator and mengharuskan semua kondisi terpenuhi. Koma berperan sebagai or — aturan berlaku bila salah satu kondisi cocok, misalnya layar lebar atau orientasi landscape.
#Mobile-First vs Desktop-First
Ada dua gaya penulisan media query. Mobile-first menulis style dasar untuk layar kecil lalu memperluas dengan min-width. Desktop-first sebaliknya: style untuk layar besar lalu menyusut dengan max-width:
.kartu {
display: block;
padding: 12px;
}
@media (min-width: 640px) {
.kartu {
display: flex;
gap: 16px;
padding: 24px;
}
}Mobile-first lebih disarankan: kode dasar lebih sederhana, browser ponsel yang terbatas tidak perlu memproses aturan yang tidak relevan, dan arah perubahan natural — dari sederhana ke kompleks.
#Memilih Breakpoint
Breakpoint terbaik ditentukan oleh konten, bukan device tertentu. Ukuran breakpoint yang umum:
@media (min-width: 640px) {
.grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.grid {
grid-template-columns: repeat(4, 1fr);
}
}
@media (min-width: 1280px) {
.grid {
grid-template-columns: repeat(6, 1fr);
}
}Mulailah dari satu breakpoint, lalu tambahkan hanya ketika layout benar-benar mulai terlihat sempit atau melebar berlebihan. Tiga atau empat breakpoint sudah cukup untuk mayoritas proyek.
#Pola Layout Responsif Umum
#Kolom yang Menyatu
Pola paling klasik: layout multi-kolom berubah menjadi satu kolom di layar kecil:
.halaman {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
@media (min-width: 900px) {
.halaman {
grid-template-columns: 240px 1fr;
}
}
@media (min-width: 1200px) {
.halaman {
grid-template-columns: 240px 1fr 280px;
}
}Sidebar duduk di bawah konten pada layar kecil, muncul ke samping pada layar sedang, dan konten tambahan muncul pada layar lebar.
#Menu yang Menyesuaikan
.nav-menu {
display: none;
}
@media (min-width: 768px) {
.nav-menu {
display: flex;
gap: 24px;
}
.tombol-menu {
display: none;
}
}Pada ponsel menu disembunyikan dan tombol hamburger ditampilkan; pada layar lebih besar tombolnya hilang dan menu terlihat. HTML untuk keduanya bisa diatur dengan class yang di-toggle lewat JavaScript.
#Latihan: Galeri Responsif
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Galeri Responsif</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<main class="galeri">
<div class="item">Satu</div>
<div class="item">Dua</div>
<div class="item">Tiga</div>
<div class="item">Empat</div>
<div class="item">Lima</div>
<div class="item">Enam</div>
</main>
</body>
</html>* { box-sizing: border-box; }
body { margin: 0; padding: 16px; font-family: system-ui, sans-serif; }
.galeri { display: grid; grid-template-columns: 1fr; gap: 16px; }
.item { min-height: 120px; background-color: #2563eb; color: white; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; }
@media (min-width: 600px) { .galeri { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .galeri { grid-template-columns: repeat(3, 1fr); } }Jalankan npx serve ., lalu buka DevTools dan aktifkan mode responsif dengan pintasan. Geser lebar viewport dan amati galeri berubah dari satu kolom menjadi dua, lalu tiga kolom sesuai breakpoint.
#Kesalahan Umum dan Solusinya
#Breakpoint Terlalu Banyak
Menambah breakpoint untuk setiap perangkat membengkakkan kode. Fokus pada perilaku konten: tambahkan breakpoint hanya saat layout terlihat buruk, bukan saat ganti perangkat.
#Order Aturan Mengacaukan
Pada mobile-first, aturan min-width yang lebih besar harus datang setelah yang lebih kecil agar menang dalam spesifisitas yang sama. Urutan menulis menentukan hasil akhir.
#Melupakan Viewport Meta
Media query tidak berfungsi optimal tanpa tag meta viewport. Pastikan setiap halaman menyertakan width=device-width di dalam HTML head.
#Penutup
Inti yang harus dibawa pulang:
- Media query memungkinkan CSS berbeda berlaku pada kondisi viewport tertentu.
min-widthdipakai untuk pendekatan mobile-first;max-widthuntuk desktop-first.- Breakpoint ditentukan oleh konten, bukan nama perangkat.
- Gabungkan kondisi dengan
and, buat beberapa kondisi dengan koma. - Urutan aturan menentukan hasil akhir pada spesifisitas yang sama.
- Selalu sertakan meta viewport agar responsif bekerja di perangkat seluler.
Di episode 10 selanjutnya kita akan membahas unit modern dan layout fluid — memakai
rem, persen,vw,vh, danclampagar ukuran menyesuaikan diri secara otomatis dengan layar.