CSS Responsive

Sekarang kita masuk ke salah satu materi paling penting dalam dunia web modern, yaitu Responsive Web Design (Desain Responsif). Materi ini akan membantumu membuat website yang tetap terlihat bagus di semua perangkat — dari HP kecil sampai layar monitor besar.

Apa Itu Responsive Design?

Responsive Design adalah pendekatan dalam desain web agar tampilan website menyesuaikan ukuran layar pengguna, baik itu:

Smartphone
Tablet
Laptop
Desktop

Tujuan Responsive Design

Website mudah dibaca & dinavigasi
Tidak perlu zoom manual
Tampilan konsisten di berbagai perangkat

3 Teknik Utama dalam Responsive Design

Dalam mengembangkan website yang memiliki dasain responsif, ada 3 teknik utama yang diperlukan.

1. Menggunakan Persentase & Satuan Fleksibel

Alih-alih memakai px, gunakan %, em, rem, dan vw/vh agar ukuran bisa mengikuti lebar/tinggi layar.

Contoh:

.container {
  width: 80%; /* lebih fleksibel daripada 800px */
  padding: 2em;
}

2. Media Queries

Media Queries memungkinkan kamu mengatur style berbeda berdasarkan ukuran layar.

Contoh:

/* Ukuran default (desktop) */
.container {
  font-size: 20px;
}

/* Ukuran untuk layar <= 768px (tablet dan HP) */
@media (max-width: 768px) {
  .container {
    font-size: 16px;
  }
}

Struktur Umum Media Query:

@media (condition) {
  /* CSS di sini akan aktif jika condition terpenuhi */
}

3. Flexbox & Grid Layout

Sudah kamu pelajari sebelumnya — sangat berguna untuk mengatur layout yang fleksibel dan bisa disesuaikan dengan media queries.

Contoh:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

Contoh kode lengkap Responsive Website Sederhana

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      width: 80%;
      margin: auto;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .box {
      background-color: #4caf50;
      color: white;
      text-align: center;
      padding: 40px 0;
      font-size: 18px;
    }

    @media (max-width: 768px) {
      .container {
        grid-template-columns: 1fr;
      }

      .box {
        font-size: 16px;
        padding: 30px 0;
      }
    }
  </style>
</head>
<body>

  <h1 style="text-align:center;">Responsive Grid Example</h1>
  <div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
  </div>

</body>
</html>

Hasilnya jika dibuka menggunakan layar laptop:

css-responsive-laptop

Hasilnya jika dibuka menggunakan layar hp:

css-responsive-laptop

Tips Membuat Website Responsif

Gunakan meta viewport di tag <head>:

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

Gunakan max-width, min-width, dan auto agar elemen tidak kaku
Uji tampilan di berbagai perangkat atau gunakan DevTools di browser
Gunakan layout modern seperti Flexbox/Grid
Latih mata dan naluri desainmu dengan melihat website yang bagus tampilannya di mobile dan desktop

Kesimpulan

Responsive Design = User-Friendly + Multi-Device Friendly

Dengan desain responsif, kamu bisa:

Membuat pengunjung betah
Meningkatkan pengalaman pengguna (UX)
Naik peringkat SEO (Google sangat peduli dengan responsif)