Responsif Design

Langkah 1: Menambahkan Tag Meta

Tambahkan tag meta berikut di dalam bagian <head> dokumen HTML Anda:

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

Ini memungkinkan perangkat untuk merender halaman web dengan benar pada berbagai ukuran layar.

Langkah 2: Membungkus Konten dalam Container

Bungkus semua konten Anda dalam elemen div dengan kelas container atau wrapper:

<div class="container">
  <!-- Konten Anda di sini -->
</div>

Langkah 3: Menerapkan CSS Dasar

Tambahkan CSS dasar untuk elemen-elemen HTML Anda. Pastikan menggunakan unit yang fleksibel seperti persen (%) untuk lebar elemen agar sesuai dengan layar yang berbeda.

.container {
  width: 100%;
  max-width: 1200px; /* Atur lebar maksimum sesuai kebutuhan Anda */
  margin: 0 auto;
}

Langkah 4: Media Queries

Tambahkan media queries untuk mengatur tata letak dan gaya berdasarkan lebar layar. Contoh:

/* Untuk layar berukuran kecil (misalnya ponsel) */
@media (max-width: 768px) {
  .container {
    padding: 10px;
  }
}

/* Untuk layar berukuran sedang (misalnya tablet) */
@media (min-width: 768px) and (max-width: 1024px) {
  .container {
    padding: 20px;
  }
}

/* Untuk layar berukuran besar (misalnya desktop) */
@media (min-width: 1025px) {
  .container {
    padding: 30px;
  }
}

Anda dapat menyesuaikan aturan media queries sesuai dengan kebutuhan desain responsif Anda.

Langkah 5: Uji Coba

Terakhir, uji tampilan situs Anda pada berbagai perangkat dan lebar layar untuk memastikan desain responsif berfungsi dengan baik.

Ini adalah panduan dasar untuk membuat desain responsif dalam HTML menggunakan media queries. Anda dapat mengembangkan lebih lanjut sesuai kebutuhan proyek Anda. Semoga berhasil!

PREVIOUS
NEXT