CSS3Tingkat: Menengah6 min
Desain Responsif, Media Queries & Mobile-First
Rancang website yang nyaman diakses di ponsel, tablet, dan desktop menggunakan filosofi Mobile-First, breakpoint @media, dan unit dinamis modern (dvh).
Filosofi Desain Mobile-First
Pratinjau TerbukaDesain Mobile-First menuliskan gaya dasar untuk layar kecil terlebih dahulu tanpa media query, kemudian menambahkan aturan @media (min-width: ...) secara bertahap untuk layar tablet dan desktop.
Contoh Kode Sintaks
/* Gaya Default: Mobile Layar Kecil */
.kontainer-kartu {
display: flex;
flex-direction: column;
gap: 12px;
}
/* Tablet ke Atas (min-width: 768px) */
@media (min-width: 768px) {
.kontainer-kartu {
flex-direction: row;
flex-wrap: wrap;
}
}
/* Desktop Lebar (min-width: 1024px) */
@media (min-width: 1024px) {
.kontainer-kartu {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
}Live Compiler Runner
Akses Kursus Wajib Login
Buka Akses Penuh Silabus & Praktikum
Masuk dengan akun GitHub, Google, atau Akses Cepat Developer untuk membuka seluruh materi mendalam, menjalankan compiler interaktif, mengerjakan kuis, dan menyimpan progres belajar Anda.
145+ Modul Lengkap•Tersimpan Otomatis•Sertifikat Kelulusan Resmi