Media Queries

Media Queries adalah alat yang sangat berguna dalam pengembangan desain responsif untuk situs web. Dengan Media Queries, Anda dapat mengatur tampilan situs web Anda agar sesuai dengan berbagai perangkat dan lebar layar. Berikut adalah langkah-langkah untuk menggunakannya:

1. Menambahkan Tag <meta> pada HTML

Pastikan Anda memiliki tag <meta> berikut dalam elemen <head> pada dokumen HTML Anda:

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

Tag ini membantu perangkat mengenali bahwa situs web Anda dioptimalkan untuk perangkat bergerak.

2. Menulis Media Queries dalam CSS

Gunakan blok @media untuk menentukan aturan CSS yang berbeda untuk lebar layar tertentu. Contoh:

/* Stil untuk layar kecil (di bawah 600px) */
@media (max-width: 600px) {
  body {
    font-size: 16px;
  }
}

/* Stil untuk layar sedang (600px hingga 900px) */
@media (min-width: 601px) and (max-width: 900px) {
  body {
    font-size: 18px;
  }
}

/* Stil untuk layar besar (lebih dari 900px) */
@media (min-width: 901px) {
  body {
    font-size: 20px;
  }
}

Dalam contoh di atas, ukuran font berubah berdasarkan lebar layar.

3. Menyisipkan Media Queries ke dalam CSS Anda

Anda dapat menyisipkan media queries langsung dalam file CSS Anda atau dalam tag <style> di dokumen HTML Anda.

<head>
  <style>
    @media (max-width: 600px) {
      /* Aturan CSS untuk layar kecil */
    }
  </style>
</head>

4. Menguji Responsifitas

Untuk menguji responsifitas desain Anda, coba ubah ukuran jendela browser atau coba akses situs web Anda melalui perangkat dengan berbagai lebar layar. Pastikan tampilan situs web berubah sesuai dengan aturan yang Anda tentukan dalam Media Queries.

Itulah dasar-dasar penggunaan Media Queries dalam CSS untuk desain responsif. Anda dapat menyesuaikan aturan CSS sesuai kebutuhan Anda untuk menciptakan pengalaman pengguna yang lebih baik di berbagai perangkat.

PREVIOUS
NEXT