CSS ResponsiveLesson 91Preview gratis
RWD Media Queries
Lesson ini bagian dari CSS · Semua level
Ringkasan
Media query adalah alat utama RWD untuk mengaktifkan gaya berbeda pada titik lebar layar tertentu yang disebut breakpoint. Kondisi `min-width` dipakai untuk menambah gaya ke atas (mobile-first), sedangkan `max-width` untuk mengecualikan gaya pada layar kecil. Pemilihan breakpoint sebaiknya berdasarkan kebutuhan konten, bukan sekadar mengikuti nama perangkat.
Poin kunci
- Breakpoint adalah titik lebar tempat tata letak perlu diubah
- `@media (min-width: X)` aktif dari lebar X dan seterusnya ke atas
- Deklarasi di dalam blok media query menimpa deklarasi luar untuk properti yang sama
- Praktik mobile-first menulis gaya dasar dulu, lalu memperluas dengan `min-width`
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.