Media query bikin CSS berubah mengikuti lebar layar. Halaman yang sama bisa tampil tiga kolom di laptop dan numpuk jadi satu kolom di HP. Kalau @container menanyakan lebar pembungkus, @media menanyakan lebar viewport, yaitu lebar layar atau jendela browser.
🧪 Tebakan cepat: layar selebar 800px kena aturan di dalam
@media (max-width: 768px)atau gak? Tebak dulu, jawabannya ada di bagian "Ubah tata letak di layar sempit".
Ubah tata letak di layar sempit
<div class="container">
<div class="box">A</div>
<div class="box">B</div>
<div class="box">C</div>
</div>
<style>
.container {
display: flex;
gap: 16px;
}
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}
</style>
.container { ... }di luar query berlaku di semua layar: tiga kotak berjajar ke samping.@media (max-width: 768px)adalah syaratnya: "lebar layar 768px atau kurang?"max-widthartinya lebar paling besar.- Di dalam kurung kurawalnya, selector ditulis lagi,
.container { ... }, karena@mediasendiri gak menunjuk elemen apa pun. flex-direction: columncuma berlaku kalau syaratnya terpenuhi.
Hasilnya, di layar lebih lebar dari 768px, kotak A, B, dan C berjajar ke samping. Di 768px atau kurang, ketiganya numpuk ke bawah. Jawaban tebakan: gak kena, karena 800px lebih lebar dari 768px.
Aturan di luar query tetap dipakai di layar sempit. Query cuma menimpa properti yang ditulis di dalamnya, jadi display: flex dan gap tetap ada, yang berubah cuma arahnya.
Cara menulis syaratnya
- Syarat ditulis di dalam kurung, nama dan angkanya dipisah titik dua:
(max-width: 768px). - Angkanya pakai satuan:
768px, bukan768. Bentuk kayak@media max-width(768)atau@screengak valid. min-widthkebalikannya:@media (min-width: 768px)berlaku di layar 768px atau lebih.
Angka batas kayak 768px disebut breakpoint. Yang sering dipakai: 480px buat HP kecil, 768px buat tablet, 1024px buat laptop.
Mobile-first: mulai dari layar kecil
Cara yang disarankan: tulis CSS buat HP dulu, lalu tambahkan @media (min-width: ...) buat layar yang lebih lebar.
.container {
display: flex;
flex-direction: column;
}
@media (min-width: 769px) {
.container {
flex-direction: row;
}
}
Hasilnya sama dengan contoh pertama, tapi arahnya dibalik: dasarnya satu kolom, lalu berjajar mulai 769px. Jadi mobile-first biasanya memakai min-width, sedangkan desktop-first (mulai dari layar besar) memakai max-width.
⚠️ Jebakan yang sering ketemu
- Lupa selector di dalam query.
@media (max-width: 768px) { flex-direction: column; }gak jalan. Tulis.container { ... }di dalamnya. - Memindahkan aturan dasar ke dalam query. Layar lebar jadi kehilangan gayanya. Aturan dasar tetap di luar, query cuma menimpa.
- Lupa meta viewport. Tanpa
<meta name="viewport" content="width=device-width, initial-scale=1">di<head>, HP menganggap layarnya sekitar 980px lalu mengecilkan halaman, jadimax-width: 768pxgak pernah kena.
TL;DR: @media (max-width: 768px) { .container { ... } } berlaku di layar 768px atau kurang. Tulis selector lagi di dalam query, dan biarkan aturan dasarnya di luar. Angka syaratnya pakai satuan. Mobile-first: gaya dasar buat HP, lalu @media (min-width: ...) buat layar yang lebih lebar.
