💡 ULASAN & REFERENSI • DIPERBARUI: 23 October 2026 • REDAKSI AZWINN

CSS Media Query untuk Layar Kecil: Panduan Implementasi Responsif

Implementasi Media Query untuk Perangkat Layar Kecil

Media query adalah fitur CSS3 yang memungkinkan konten beradaptasi dengan berbagai resolusi layar, mulai dari ponsel pintar hingga desktop. Untuk menargetkan layar kecil (umumnya perangkat mobile), standar industri menggunakan pendekatan mobile-first dengan breakpoint maksimal 768 piksel.

Sintaks dasar untuk menargetkan layar dengan lebar maksimal 768px adalah menggunakan aturan @media only screen and (max-width: 768px). Kode di dalam blok ini hanya akan dieksekusi oleh browser jika lebar viewport perangkat berada di bawah atau sama dengan 768 piksel.

Sintaks Dasar Media Query

/* Gaya default untuk semua perangkat (Mobile First) */
body {
  font-size: 16px;
}

/* Gaya khusus untuk layar kecil (Tablet ke bawah) */
@media only screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
  .container {
    width: 95%;
  }
}

Tabel Breakpoint Standar Industri

Kategori PerangkatBreakpoint (max-width)Penggunaan Umum
Ponsel Kecil480pxLayout satu kolom, font lebih kecil
Tablet/Ponsel Besar768pxPenyesuaian padding dan margin
Laptop/Desktop1024pxLayout multi-kolom

Praktik Terbaik Pengembangan Responsif

  • Gunakan Viewport Meta Tag: Pastikan tag <meta name="viewport" content="width=device-width, initial-scale=1.0"> terpasang di dalam elemen <head> agar skala layar terbaca dengan benar oleh browser mobile.
  • Pendekatan Mobile-First: Tulis CSS dasar untuk layar kecil terlebih dahulu, kemudian gunakan min-width untuk menambah kompleksitas desain pada layar yang lebih besar. Ini mengurangi beban kerja browser pada perangkat mobile.
  • Hindari Hardcoding Lebar: Gunakan persentase (%) atau unit relatif (rem, em, vw) daripada piksel (px) untuk lebar elemen agar tata letak lebih fleksibel.
  • Uji Coba Perangkat: Gunakan fitur Inspect Element (F12) pada browser Chrome atau Firefox untuk mensimulasikan berbagai ukuran layar secara real-time tanpa harus memiliki perangkat fisik.

Troubleshooting Umum

Jika media query tidak berfungsi, periksa hal berikut: 1) Pastikan meta viewport tag sudah benar. 2) Periksa apakah ada kesalahan sintaks (kurung kurawal yang tidak tertutup). 3) Pastikan urutan CSS benar; jika Anda menggunakan min-width, letakkan aturan yang lebih besar di bawah aturan yang lebih kecil.

🔍 Orang Lain Juga Mencari Ini