Materi
Aturan @media membungkus sekelompok aturan CSS yang hanya dipakai kalau kondisinya terpenuhi. Kondisi (min-width: 600px) berarti aturan di dalamnya berlaku pada lebar 600 piksel ke atas.
.galeri { grid-template-columns: 1fr; }
@media (min-width: 600px) {
.galeri { grid-template-columns: repeat(2, 1fr); }
}Pola mobile-first menulis aturan dasar untuk layar tersempit lebih dulu, lalu menambah aturan dengan min-width untuk layar yang lebih lebar. Aturan dasar tidak perlu dibungkus media query sama sekali. Titik tempat tata letak diubah dipilih dari isi halaman: perbesar jendela sampai kolomnya terlihat terlalu lebar, lalu pasang media query di lebar itu.
Kondisi ditulis dalam tanda kurung dan bisa digabung dengan and: @media (min-width: 600px) and (max-width: 900px) berlaku hanya di rentang itu. Lebar yang diperiksa adalah lebar area tampil (viewport), bukan lebar fisik layar perangkat.
Halaman yang tidak memuat baris meta viewport diperlakukan peramban ponsel sebagai halaman selebar sekitar 980 piksel lalu diperkecil, sehingga media query min-width seolah tidak pernah menyala dan semua teks mengecil. Baris <meta name="viewport" content="width=device-width, initial-scale=1"> ditulis satu kali di bagian head halaman.
