Skip to main content

Responsive Web

Oke, siap. Kita ulangi. Membuat web yang responsif itu sekarang jadi keharusan. Intinya, layout web kita bisa "beradaptasi" dengan berbagai ukuran layar dari HP kecil, tablet, sampai monitor desktop lebar.

Berikut adalah materi dasarnya, dibagi per bagian.

Meta Tag Viewport​

Ini adalah langkah paling pertama dan wajib ada. Tanpa ini, browser di HP akan menganggap web kita sebagai versi desktop dan menampilkannya dalam versi zoom-out (kecil sekali).

Taruh baris ini di dalam tag <head> pada file HTML kamu:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Artinya:

  • width=device-width: Buat lebar halaman sama dengan lebar layar perangkat.
  • initial-scale=1.0: Atur tingkat zoom awal ke 100% (tanpa zoom).

Media Queries​

Ini adalah "jantung" dari desain responsif. Media query adalah fitur CSS yang mengizinkan kita menerapkan style CSS berbeda berdasarkan kondisi tertentu, paling sering adalah lebar layar.

Gampangnya, ini seperti perintah "Jika... Maka..." di CSS.

  • "Jika lebar layar di bawah 600px, maka..."
  • "Jika lebar layar di atas 900px, maka..."

Sintaks Dasar​

Sintaksnya menggunakan @media.

/* Style ini berlaku untuk semua ukuran layar (default) */
body {
  background-color: white;
}

/* Media Query: 
  Jika lebar layar 768px ATAU LEBIH KECIL (max-width), 
  maka terapkan style di dalamnya.
*/
@media (max-width: 768px) {
  body {
    background-color: lightblue; /* Ganti background jadi biru muda di layar kecil */
  }
}

Contoh Layout Umum​

Misalnya kita punya dua kotak (sidebar dan konten utama) yang awalnya bersebelahan. Di layar kecil, kita mau membuatnya tersusun ke bawah.

HTML:

<div class="container">
  <div class="konten-utama">Konten...</div>
  <div class="sidebar">Sidebar...</div>
</div>

CSS (Pendekatan "Mobile-First"):

/* 1. Default (Mobile): 
  Kita buat tersusun ke bawah dulu. 
*/
.container {
  display: flex;
  flex-direction: column; /* Susun ke bawah */
}

.konten-utama {
  width: 100%;
}

.sidebar {
  width: 100%;
  background-color: #f4f4f4;
}

/* 2. Media Query (Desktop):
  Jika layar LEBIH BESAR DARI 768px (min-width),
  ubah layout-nya jadi bersebelahan.
*/
@media (min-width: 768px) {
  .container {
    flex-direction: row; /* Susun ke samping */
  }

  .konten-utama {
    width: 70%;
  }

  .sidebar {
    width: 30%;
  }
}

Ini disebut pendekatan Mobile-First, di mana style default kita adalah untuk HP, dan kita menambahkan style untuk layar lebih besar via min-width.