Responsive Design dan Media Query

Apa itu Responsive Design?

Responsive design adalah pendekatan untuk membuat tampilan website menyesuaikan ukuran layar perangkat:

• Desktop
• Tablet
• Smartphone

Tujuannya agar:

• Teks tetap mudah dibaca.
• Layout tidak rusak atau terlalu kecil.
• Pengalaman pengguna tetap nyaman di berbagai perangkat.

Media Query

Media query adalah fitur CSS yang memungkinkan kita menerapkan style tertentu berdasarkan kondisi seperti lebar layar.

Contoh umum:

@media (max-width: 1024px) {
  /* CSS untuk layar dengan lebar <= 1024px */
}

@media (max-width: 600px) {
  /* CSS untuk layar dengan lebar <= 600px */
}

Contoh Responsive di Proyek Portfolio

Di styles.css, ada dua media query utama.

1. Untuk lebar maksimum 1024px

@media (max-width: 1024px) {
  header,
  nav {
    flex-direction: column;
    text-align: center;
  }
 
  nav {
    gap: 30px;
    margin-top: 20px;
  }
 
  .profile-container,
  .contact-container {
    padding: 0 40px;
    text-align: center;
  }
 
  .profile-container {
    flex-direction: column-reverse;
  }
 
  .contact-container {
    flex-direction: column;
  }
 
  .contact-form button {
    width: 100%;
  }
 
  .project-list {
    grid-template-columns: 1fr 1fr;
  }
 
  footer {
    margin-top: 40px;
  }
}

Perubahan utama:

• Header dan navigasi menjadi kolom, bukan baris.
• Konten profil dan kontak disusun vertikal.
• Button pada form kontak melebar penuh.
• Grid projek menjadi 2 kolom.

2. Untuk lebar maksimum 600px

@media (max-width: 600px) {
  .project-list {
    grid-template-columns: 1fr;
  }
 
  .profile-title,
  .project-title,
  .contact-title {
    font-size: 32px;
  }
}

Perubahan:

• Daftar projek menjadi 1 kolom, sehingga lebih nyaman di layar kecil.
• Ukuran judul diperkecil agar proporsional.

Dengan media query, satu file CSS dapat mengatur tampilan di berbagai ukuran layar tanpa mengubah HTML.