Cara Membuat Website Responsif dengan CSS Media Query

Satu kode HTML, berbagai ukuran layar

Saat ini, lebih dari 60% pengguna internet membuka website melalui smartphone. Jika kamu mendesain website hanya untuk layar laptop, pengunjung dari HP akan kesulitan membaca teks yang kekecilan atau harus men-scroll layar ke kanan dan kiri (horizontal scroll) yang sangat mengganggu.

Solusinya adalah Responsive Web Design menggunakan fitur CSS bernama Media Query.

Apa itu Media Query?

Media Query adalah fitur CSS yang memungkinkan kodemu "bertanya" kepada browser: "Berapa lebar layarmu saat ini?" Jika lebarnya memenuhi syarat tertentu, CSS akan menerapkan gaya (style) yang berbeda.

Sintaks Dasar Media Query

Cara penulisannya sangat mudah. Kamu menggunakan keyword @media diikuti dengan kondisi lebar layarnya.

/* Style Default (Misal: untuk HP / layar kecil) */
.container {
  width: 100%;
  flex-direction: column;
}

/* Saat lebar layar minimal 768px (Tablet & Laptop) */
@media (min-width: 768px) {
  .container {
    flex-direction: row; /* Ubah layout jadi menyamping */
    width: 80%; /* Jangan terlalu penuh di layar besar */
  }
}

Mobile-First vs Desktop-First

Ada dua pendekatan dalam menulis CSS responsif:

• Desktop-First: Kamu menulis CSS untuk laptop dulu, lalu menggunakan @media (max-width: 768px) untuk mengubah tampilannya agar muat di HP.
• Mobile-First (Sangat Dianjurkan): Kamu menulis CSS untuk HP dulu (layout memanjang ke bawah yang simpel), lalu menggunakan @media (min-width: 768px) untuk melebarkannya saat dibuka di laptop.

Pendekatan Mobile-First lebih disukai karena kode CSS-nya cenderung lebih bersih dan website di HP memuat lebih cepat (karena HP tidak perlu mendownload aturan CSS desktop yang kompleks).

Kesimpulan

Responsivitas bukan lagi fitur tambahan, melainkan kewajiban. Selalu gunakan Inspect Element di browsermu, klik icon Device Toolbar (Ctrl+Shift+M), dan periksa bagaimana tampilan website-mu di berbagai ukuran layar simulasi (iPhone, iPad, dll) sebelum di-deploy.