← CSS31 / 62

Media query mobile-first

Mobile-first artinya CSS dasarmu ditulis untuk layar kecil, lalu @media (min-width: ...) menambahkan penyesuaian untuk layar lebih lebar. Kenapa arah ini? Karena layout mobile umumnya lebih sederhana (satu kolom), jadi kamu menambah kerumitan seiring ruang bertambah — bukan sebaliknya. Ini juga default di Tailwind.

👀 Contoh dulu

/* dasar: berlaku di SEMUA ukuran (termasuk HP) */
.judul {
  font-size: 20px;
}

/* tambahan: hanya berlaku dari 768px ke atas */
@media (min-width: 768px) {
  .judul {
    font-size: 36px;
  }
}

Hasilnya: Di HP judul berukuran 20px; begitu lebar layar mencapai 768px, judul menjadi 36px.

💡 Perhatikan struktur: @media (kondisi) { selector { properti } } — ada dua tingkat kurung kurawal.

📝 Sekarang giliranmu

Tambahkan media query @media (min-width: 600px) yang mengubah .kotak menjadi background: green;.

Preview
← SebelumnyaBerikutnya →