Responsive Web Desain

18 May 2025

Materi Lengkap Responsive Web Design

1. Pengertian

Responsive Web Design (RWD) adalah pendekatan desain web agar tampilan dan layout website menyesuaikan ukuran layar pengguna, seperti desktop, tablet, dan smartphone.

2. Tujuan Responsive Design

3. Teknik Utama

a. Viewport Meta Tag

Menentukan bagaimana halaman ditampilkan di perangkat mobile.

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

b. Media Queries

Menentukan aturan CSS berdasarkan lebar layar.

@media (max-width: 768px) {
  body {
    background-color: lightgray;
  }
}

c. Layout Fleksibel

Gunakan width dalam persentase daripada satuan tetap (px).

.container {
  width: 100%;
  padding: 5%;
}

d. Gambar Responsif

img {
  max-width: 100%;
  height: auto;
}

e. Framework CSS (Contoh: Bootstrap)

Menggunakan grid system dan utility classes seperti col-md-6, d-none, d-lg-block.

4. Tools untuk Testing Responsif

5. Contoh Layout Responsive Sederhana

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .container {
      display: flex;
      flex-wrap: wrap;
    }
    .box {
      flex: 1 1 300px;
      padding: 20px;
      background: lightblue;
      margin: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">Konten 1</div>
    <div class="box">Konten 2</div>
    <div class="box">Konten 3</div>
  </div>
</body>
</html>

6. Tips Tambahan

7. Referensi