Belajar CSS Part 7: Responsive Design & Media Queries

by

Setelah memahami CSS Grid Layout di Part 6, sekarang kita akan membahas cara membuat desain yang responsif menggunakan Media Queries.

Di Part 7 ini, kamu akan belajar tentang:

  • Konsep desain responsif
  • Cara menggunakan media queries untuk menyesuaikan desain dengan perangkat yang berbeda
  • Tips membuat website yang bisa digunakan dengan baik di semua ukuran layar

Apa Itu Responsive Design?

Responsive design adalah pendekatan desain web yang memungkinkan halaman web beradaptasi dengan berbagai ukuran layar perangkat.

Dengan responsive design, website akan terlihat baik dan fungsional baik di perangkat desktop, tablet, maupun smartphone.

Pentingnya Responsive Design

  • Meningkatkan pengalaman pengguna di berbagai perangkat
  • Memperbaiki SEO karena Google mengutamakan situs yang responsif
  • Menjamin konten dapat diakses di semua perangkat tanpa kehilangan fungsionalitas

Penggunaan Media Queries

Media queries memungkinkan kita untuk menentukan gaya CSS yang berbeda berdasarkan ukuran layar perangkat atau karakteristik lainnya (seperti orientasi atau resolusi).

Dengan media queries, kita dapat membuat desain yang menyesuaikan diri (adaptive) dengan ukuran layar perangkat pengguna.

Dasar Media Query

Sintaks dasar dari media query adalah sebagai berikut: 


@media screen and (max-width: 768px) {
  /* Gaya CSS untuk perangkat dengan lebar maksimal 768px (seperti tablet) */
  .container {
    flex-direction: column;
  }
}

Contoh HTML Lengkap: Responsive Menu, Dasar Media Query

<!DOCTYPE html>
<html>
<head>
  <title>Simple Responsive Menu</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

  <nav class="navbar">
    <ul class="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

</body>
</html>

Desktop

  • Menu tampil horizontal (display: flex)
  • Rata tengah
  • Spacing rapi

Mobile (≤768px)

  • flex-direction: column
  • Menu berubah jadi vertikal
  • Jarak antar item disesuaikan

Di sini, CSS di dalam media query hanya akan diterapkan jika lebar layar perangkat kurang dari atau sama dengan 768px.

Beberapa Contoh Penggunaan Media Queries

1. Layout untuk Smartphone

Misalnya, kita ingin layout dua kolom diubah menjadi satu kolom pada perangkat dengan lebar layar kurang dari 600px: 


@media screen and (max-width: 600px) {
  .container {
    display: block;
  }

  .item {
    width: 100%;
  }
}

Contoh HTML Lengkap: Layout untuk Smartphone

<!DOCTYPE html>
<html>
<head>
  <title>Responsive 2 Kolom ke 1 Kolom</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

  <div class="container">
    <div class="item left">Kolom Kiri</div>
    <div class="item right">Kolom Kanan</div>
  </div>

</body>
</html>

Penejelasan

.container { display: block; }
Jika sebelumnya .container menggunakan:

  • display: flex
  • atau display: grid

Maka di layar kecil, layout dimatikan dan kembali menjadi layout normal (block).
Artinya:

  • Elemen akan tersusun ke bawah
  • Tidak lagi berdampingan

.item { width: 100%; }
Artinya:

  • Setiap item akan memenuhi lebar layar
  • Layout menjadi 1 kolom

2. Pengaturan Font pada Layar Kecil

Kita dapat menyesuaikan ukuran font agar lebih besar pada layar yang lebih besar dan lebih kecil di layar ponsel: 


h1 {font-size: 32px;}

@media screen and (max-width: 600px) {
  h1 {font-size: 24px;}
}

Artinya:

  • Judul diperkecil jadi 24px
  • Supaya tidak terlalu besar di layar kecil
  • Lebih nyaman dibaca

Contoh HTML Lengkap: Responsive Font

<!DOCTYPE html>
<html>
<head>
  <title>Responsive Font</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

  <h1>Judul Responsive</h1>
  <p>Ukuran font akan menyesuaikan dengan ukuran layar.</p>

</body>
</html>

Desktop

  • h1 → 32px
  • p → 18px

Smartphone

  • h1 → 24px
  • p → 16px

Tips Membuat Website Responsif

  • Gunakan unit yang fleksibel seperti em, rem, dan % alih-alih px untuk ukuran
  • Gunakan gambar responsif dengan atribut srcset dan sizes untuk gambar yang sesuai dengan ukuran layar
  • Prioritaskan konten: Pastikan konten utama tetap mudah diakses di perangkat apapun
  • Uji desainmu di berbagai perangkat dan ukuran layar untuk memastikan konsistensi

Contoh Implementasi Media Queries

Berikut adalah contoh penggunaan media queries untuk membuat desain responsif yang menyesuaikan tampilan di berbagai perangkat: 


.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

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

@media screen and (max-width: 480px) {
  .container {
    grid-template-columns: 1fr;
    padding: 10px;
  }
}

Desktop (Default)
grid-template-columns: 1fr 1fr;

Artinya:

  • Layout 2 kolom
  • Cocok untuk laptop / desktop

Tablet (≤ 768px)
@media screen and (max-width: 768px)

Artinya:

  • Saat layar mengecil
  • Layout berubah jadi 1 kolom
  • Supaya konten lebih nyaman dibaca

Smartphone Kecil (≤ 480px)
@media screen and (max-width: 480px)

Tambahan

  • Tetap 1 kolom
  • Padding diperkecil agar ruang lebih efisien

Contoh HTML Lengkap: desain responsif

<!DOCTYPE html>
<html>
<head>
  <title>Responsive Grid Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

  <div class="container">
    <div class="card">Card 1</div>
    <div class="card">Card 2</div>
    <div class="card">Card 3</div>
    <div class="card">Card 4</div>
  </div>

</body>
</html>

Pada contoh ini, layout akan berubah menjadi satu kolom ketika lebar layar perangkat kurang dari 768px, dan padding akan lebih kecil pada layar yang lebih kecil dari 480px.

Kesalahan Umum dalam Responsive Design

  • Memilih ukuran font yang terlalu kecil di perangkat mobile
  • Lupa menyesuaikan gambar agar responsif menggunakan srcset
  • Penggunaan unit statis seperti px untuk ukuran yang seharusnya fleksibel

Ringkasan CSS Part 7

  • Responsive design memungkinkan website menyesuaikan diri dengan berbagai ukuran layar perangkat
  • Gunakan media queries untuk membuat desain yang adaptif
  • Pastikan desain responsif untuk memberikan pengalaman pengguna yang optimal di perangkat apapun

Lanjutan Materi

Di CSS Part 8, kita akan membahas:

  • CSS Transitions & Animations
  • Bagaimana membuat elemen-elemen web menjadi lebih interaktif dan dinamis

Lanjut ke: Belajar CSS Part 8

Avatar photo

Agus Sopian

Hobi saya adalah coding dan mempelajari dunia website serta teknologi sejak masa SMK. Melalui blog ini, saya berbagi pengalaman, tutorial, dan perjalanan belajar saya di dunia programming & web development.

Leave a Comment

Console
Responsive — 100%