Responsivitas dengan Media Queries - Lummatun By Kang Mursi

Kursus: Membuat Website dari Nol

Poin 4: Responsivitas dengan Media Queries

Pada bagian ini, kita akan belajar bagaimana membuat website yang dapat menyesuaikan tampilannya di berbagai ukuran layar, mulai dari desktop hingga smartphone.

1. Apa Itu Responsivitas?

Pengertian desain responsif
Pentingnya website responsif dalam pengalaman pengguna (User Experience)
Perbedaan antara desain responsif dan desain adaptif

2. Dasar-Dasar Media Queries

Pengertian dan cara kerja media queries
Sintaks dasar media queries
Contoh penggunaan media queries sederhana

@media (max-width: 768px) {
  body {
    background-color: lightblue;
  }
}

3. Breakpoints dalam Desain Responsif

Standar breakpoints umum yang digunakan:
- Desktop: 1024px ke atas
- Tablet: 768px – 1024px
- Mobile: di bawah 768px
Menggunakan breakpoints secara efektif

4. Teknik Responsivitas Lanjutan

Flexbox dan Grid untuk layout fleksibel
Penggunaan viewport units (vh, vw, vmin, vmax)
Gambar dan media responsif (img { max-width: 100%; height: auto; })
Typography responsif dengan rem dan em

5. Latihan Praktis: Membuat Website Responsif

Mengubah layout website agar responsif
Menyesuaikan menu navigasi untuk mobile
Menggunakan media queries untuk mengatur tampilan elemen

Contoh Implementasi Media Queries untuk Website Responsif

1. Struktur HTML Sederhana

Berikut adalah contoh halaman web sederhana dengan header, navigasi, dan konten utama:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website Responsif</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Website Responsif</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">Beranda</a></li>
            <li><a href="#">Tentang</a></li>
            <li><a href="#">Kontak</a></li>
        </ul>
    </nav>
    <main>
        <p>Selamat datang di website responsif! Coba ubah ukuran layar untuk melihat perubahannya.</p>
    </main>
</body>
</html>

2. CSS Dasar untuk Layout

File style.css akan mengatur tampilan awal sebelum media queries diterapkan:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #f4f4f4;
}

header {
    background: #333;
    color: white;
    padding: 20px;
}

nav ul {
    list-style: none;
    padding: 10px;
}

nav ul li {
    display: inline;
    margin: 0 15px;
}

nav ul li a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
}

main {
    padding: 20px;
}

3. Menambahkan Media Queries

Agar website tetap responsif di perangkat yang lebih kecil, kita tambahkan media queries:

/* Tampilan untuk layar kecil (max-width: 768px) */
@media (max-width: 768px) {
    nav ul {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    nav ul li {
        display: block;
        margin: 10px 0;
    }

    body {
        background-color: #e0f7fa; /* Warna background berubah di layar kecil */
    }
}

/* Tampilan untuk layar sangat kecil (max-width: 480px) */
@media (max-width: 480px) {
    header {
        font-size: 18px;
        padding: 10px;
    }

    main {
        font-size: 14px;
    }
}

4. Cara Mengujinya

Buka file HTML di browser
Gunakan DevTools (tekan F12 atau klik kanan > Inspect)
Klik ikon toggle device toolbar untuk melihat tampilan di berbagai ukuran layar
Ubah ukuran jendela browser dan perhatikan perubahan layout

Hasil yang Diharapkan:

✅ Di layar besar (Desktop) → Navigasi tetap dalam satu baris
✅ Di layar tablet (≤ 768px) → Navigasi berubah ke tampilan vertikal
✅ Di layar HP (≤ 480px) → Teks dan elemen lebih kecil agar sesuai layar.

Menambahkan Menu Burger untuk Mobile

Agar navigasi lebih rapi di layar kecil, kita akan membuat menu burger yang dapat dibuka dan ditutup saat diklik.

1. Perbarui HTML

Tambahkan ikon menu burger dan div untuk navigasi:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website Responsif dengan Menu Burger</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Website Responsif</h1>
        <div class="menu-toggle" id="menu-toggle">&#9776;</div> <!-- Ikon menu burger -->
    </header>
    <nav id="nav-menu">
        <ul>
            <li><a href="#">Beranda</a></li>
            <li><a href="#">Tentang</a></li>
            <li><a href="#">Kontak</a></li>
        </ul>
    </nav>
    <main>
        <p>Selamat datang di website responsif! Coba ubah ukuran layar untuk melihat perubahannya.</p>
    </main>
    <script src="script.js"></script>
</body>
</html>

2. Tambahkan CSS untuk Menu Burger

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #f4f4f4;
}

header {
    background: #333;
    color: white;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.menu-toggle {
    font-size: 30px;
    cursor: pointer;
    display: none; /* Hanya muncul di layar kecil */
}

nav {
    background: #444;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline-block;
    margin: 15px;
}

nav ul li a {
    text-decoration: none;
    color: white;
    font-weight: bold;
}

/* Menu burger di layar kecil */
@media (max-width: 768px) {
    .menu-toggle {
        display: block; /* Muncul di layar kecil */
    }

    nav {
        display: none; /* Sembunyikan menu awalnya */
        width: 100%;
        text-align: center;
    }

    nav ul {
        display: block;
        padding: 10px 0;
    }

    nav ul li {
        display: block;
        margin: 10px 0;
    }

    nav.show {
        display: block; /* Tampilkan menu saat tombol burger diklik */
    }
}

3. Tambahkan JavaScript untuk Interaksi

Buat file script.js dan tambahkan kode berikut:

document.addEventListener("DOMContentLoaded", function () {
    const menuToggle = document.getElementById("menu-toggle");
    const navMenu = document.getElementById("nav-menu");

    menuToggle.addEventListener("click", function () {
        navMenu.classList.toggle("show"); // Toggle class "show" untuk menampilkan atau menyembunyikan menu
    });
});

4. Cara Menguji Menu Burger

Buka halaman di browser
Resize jendela ke ukuran mobile (< 768px)
Klik ikon ☰ → Navigasi muncul
Klik lagi → Navigasi hilang

Hasil yang Diharapkan:

✅ Di Desktop → Navigasi tetap terlihat seperti biasa
✅ Di Mobile → Menu burger muncul, navigasi tersembunyi hingga tombol diklik
✅ Fleksibel → Bisa diperluas dengan efek animasi atau transisi.