Setelah kita belajar Flexbox dan Grid, sekarang saatnya mengenal Media Query - kunci utama dari Responsive Web Design. Dengan media query, kita bisa menerapkan gaya CSS yang berbeda untuk ukuran layar yang berbeda (HP, tablet, laptop, monitor besar).

Apa Itu Media Query?

Media Query adalah fitur CSS yang memungkinkan kita menerapkan aturan CSS hanya jika kondisi tertentu terpenuhi. Kondisi yang paling umum adalah lebar layar (width). Dengan media query, website bisa beradaptasi dengan perangkat pengguna.

Tanpa Media Query: Website tampil sama di semua perangkat (tidak responsif).
Dengan Media Query: Website bisa mengubah ukuran font, jumlah kolom, posisi elemen, bahkan menyembunyikan/menampilkan konten sesuai ukuran layar.

Sintaks Dasar Media Query

@media (condition) {
    /* CSS rules yang berlaku jika condition terpenuhi */
}

/* Contoh: jika lebar layar maksimal 600px (HP) */
@media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

Breakpoint Umum yang Digunakan

Breakpoint adalah ukuran layar di mana desain website berubah. Berikut breakpoint standar yang banyak digunakan:

Kategori	Breakpoint	Perangkat Contoh
Mobile S (HP kecil)	`max-width: 375px`	iPhone SE, Galaxy S8
Mobile M/L (HP biasa)	`max-width: 480px` atau `640px`	iPhone 12, Pixel 5
Tablet	`max-width: 768px` atau `1024px`	iPad, Galaxy Tab
Laptop / Desktop	`min-width: 1024px`	Laptop, Monitor PC
Desktop Besar	`min-width: 1440px`	Monitor 27 inch+

Rekomendasi Breakpoint untuk Pemula:

/* HP (max-width: 640px) */
@media (max-width: 640px) { ... }

/* Tablet (641px - 1024px) */
@media (min-width: 641px) and (max-width: 1024px) { ... }

/* Desktop (min-width: 1025px) */
@media (min-width: 1025px) { ... }

1. Media Query untuk HP (max-width)

Gaya CSS di dalam media query max-width akan berlaku jika lebar layar kurang dari atau sama dengan nilai yang ditentukan.

Contoh:

<style>
    .box {
        width: 400px;
        background: #3b82f6;
        color: white;
        padding: 20px;
        margin: 10px;
    }
    
    /* Jika layar HP (lebar <= 600px) */
    @media (max-width: 600px) {
        .box {
            width: 100%;
            font-size: 14px;
        }
    }
</style>

Kotak ini lebarnya 400px di desktop, 100% di HP.

Coba resize browser atau buka Device Toolbar (F12 -> ikon ponsel). Jika lebar < 600px, kotak akan melebar penuh.

2. Media Query untuk Desktop (min-width)

Gaya CSS di dalam media query min-width akan berlaku jika lebar layar lebih dari atau sama dengan nilai yang ditentukan. Biasanya untuk gaya desktop yang lebih kompleks.

Contoh:

<style>
    body {
        font-size: 16px;
        padding: 20px;
    }
    
    /* Jika layar desktop (lebar >= 1024px) */
    @media (min-width: 1024px) {
        body {
            font-size: 18px;
            padding: 40px;
            max-width: 1200px;
            margin: 0 auto;
        }
        .container {
            display: flex;
            gap: 30px;
        }
    }
</style>

Di layar lebar (>=1024px), teks lebih besar dan padding lebih luas. Coba resize browser untuk melihat perubahan.

3. Media Query dengan Range (min-width AND max-width)

Kita bisa menggabungkan dua kondisi untuk menargetkan rentang ukuran tertentu, misalnya hanya tablet.

Contoh Tablet (641px - 1024px):

@media (min-width: 641px) and (max-width: 1024px) {
    .sidebar {
        width: 30%;
        float: left;
    }
    .main-content {
        width: 70%;
        float: right;
    }
}

Sidebar

Main Content

Di tablet (641px-1024px) layout bisa diatur khusus. Di HP, layout biasanya kolom.

4. Contoh Praktis: Layout Responsif dengan Media Query

Berikut contoh layout 3 kolom yang berubah menjadi 2 kolom di tablet dan 1 kolom di HP:

<style>
    .card-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
    .card {
        background: white;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    
    /* Tablet: 2 kolom */
    @media (max-width: 900px) {
        .card-container {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    
    /* HP: 1 kolom */
    @media (max-width: 600px) {
        .card-container {
            grid-template-columns: 1fr;
        }
    }
</style>

Card 1

Card 2

Card 3

Desktop: 3 kolom | Tablet (<900px): 2 kolom | HP (<600px): 1 kolom

5. Menyembunyikan/Menampilkan Elemen dengan Media Query

Media query bisa digunakan untuk menyembunyikan elemen yang tidak diperlukan di layar kecil, atau menampilkan elemen khusus mobile.

Contoh:

<style>
    .desktop-only {
        display: block;
    }
    .mobile-only {
        display: none;
    }
    
    @media (max-width: 768px) {
        .desktop-only {
            display: none;
        }
        .mobile-only {
            display: block;
        }
    }
</style>

<div class="desktop-only">Tampil hanya di desktop</div>
<div class="mobile-only">Tampil hanya di HP</div>

Tampil hanya di desktop (lebar > 768px)

Resize browser untuk melihat elemen bergantian muncul.

6. Mengubah Ukuran Font dan Spacing

Salah satu penggunaan media query paling umum adalah mengubah ukuran font dan padding agar nyaman dibaca di semua perangkat.

Contoh:

<style>
    body {
        font-size: 18px;
        line-height: 1.6;
        padding: 40px;
    }
    h1 {
        font-size: 48px;
    }
    
    @media (max-width: 768px) {
        body {
            font-size: 16px;
            padding: 20px;
        }
        h1 {
            font-size: 32px;
        }
    }
    
    @media (max-width: 480px) {
        body {
            font-size: 14px;
            padding: 15px;
        }
        h1 {
            font-size: 28px;
        }
    }
</style>

Judul Artikel

Ini adalah contoh paragraf. Ukuran font, padding, dan heading akan berubah sesuai lebar layar. Coba resize browser untuk melihat perubahannya!

Ukuran font menyesuaikan: desktop > tablet > HP

Contoh Proyek: Website Landing Page Responsif

Berikut contoh landing page lengkap dengan media query untuk HP, tablet, dan desktop:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Landing Page Responsive - Media Query</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: #333;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        /* NAVBAR */
        .navbar {
            background: #1e293b;
            color: white;
            padding: 15px 0;
            position: sticky;
            top: 0;
            z-index: 100;
        }
        
        .navbar .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            font-size: 24px;
            font-weight: bold;
        }
        
        .nav-links {
            display: flex;
            gap: 30px;
        }
        
        .nav-links a {
            color: white;
            text-decoration: none;
        }
        
        /* HERO */
        .hero {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 80px 0;
            text-align: center;
        }
        
        .hero h1 {
            font-size: 48px;
            margin-bottom: 20px;
        }
        
        .hero p {
            font-size: 18px;
            max-width: 600px;
            margin: 0 auto;
        }
        
        /* FEATURES */
        .features {
            padding: 60px 0;
        }
        
        .features h2 {
            text-align: center;
            margin-bottom: 40px;
        }
        
        .feature-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
        }
        
        .feature-card {
            background: #f8fafc;
            padding: 30px;
            border-radius: 12px;
            text-align: center;
        }
        
        /* FOOTER */
        .footer {
            background: #1e293b;
            color: #94a3b8;
            text-align: center;
            padding: 30px 0;
        }
        
        /* ========== MEDIA QUERIES ========== */
        
        /* Tablet (max-width: 900px) */
        @media (max-width: 900px) {
            .feature-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .hero h1 {
                font-size: 36px;
            }
        }
        
        /* HP (max-width: 640px) */
        @media (max-width: 640px) {
            .navbar .container {
                flex-direction: column;
                gap: 15px;
            }
            .nav-links {
                gap: 20px;
            }
            .hero {
                padding: 50px 0;
            }
            .hero h1 {
                font-size: 28px;
            }
            .hero p {
                font-size: 16px;
            }
            .feature-grid {
                grid-template-columns: 1fr;
            }
            .feature-card {
                padding: 20px;
            }
        }
        
        /* HP kecil (max-width: 480px) */
        @media (max-width: 480px) {
            .nav-links {
                flex-wrap: wrap;
                justify-content: center;
                gap: 12px;
            }
            .hero h1 {
                font-size: 24px;
            }
            .container {
                padding: 0 15px;
            }
        }
        
        .info {
            background: #eef2ff;
            padding: 20px;
            margin: 20px;
            border-radius: 12px;
        }
    </style>
</head>
<body>

    <nav class="navbar">
        <div class="container">
            <div class="logo">MyBrand</div>
            <div class="nav-links">
                <a href="#">Home</a>
                <a href="#">Features</a>
                <a href="#">About</a>
                <a href="#">Contact</a>
            </div>
        </div>
    </nav>

    <section class="hero">
        <div class="container">
            <h1>Website Responsive dengan Media Query</h1>
            <p>Tampilan berubah otomatis di HP, tablet, dan desktop! Coba resize browser atau buka Device Toolbar.</p>
        </div>
    </section>

    <section class="features">
        <div class="container">
            <h2>Fitur Unggulan</h2>
            <div class="feature-grid">
                <div class="feature-card"><h3>Responsive</h3><p>Tampil sempurna di semua perangkat.</p></div>
                <div class="feature-card"><h3>Modern</h3><p>Menggunakan teknologi terbaru.</p></div>
                <div class="feature-card"><h3>Cepat</h3><p>Loading cepat dan optimal.</p></div>
            </div>
        </div>
    </section>

    <footer class="footer">
        <div class="container">
            <p>&copy; 2024 - Belajar Media Query</p>
        </div>
    </footer>

    <div class="info">
        <strong>Breakpoint yang Digunakan:</strong>
        <ul>
            <li><code>@media (max-width: 900px)</code> → Tablet (2 kolom)</li>
            <li><code>@media (max-width: 640px)</code> → HP (1 kolom, navbar kolom)</li>
            <li><code>@media (max-width: 480px)</code> → HP kecil (font lebih kecil)</li>
        </ul>
    </div>

</body>
</html>

Hasil visual landing page:

MyBrand

Home Features About

Website Responsive dengan Media Query

Tampilan berubah otomatis di HP, tablet, dan desktop!

Fitur Unggulan

Responsive

Tampil sempurna di semua perangkat.

Modern

Menggunakan teknologi terbaru.

Cepat

Loading cepat dan optimal.

Media Query untuk Orientasi (Landscape/Portrait)

Kita juga bisa mendeteksi orientasi perangkat (horizontal/vertical).

/* Ketika HP diputar horizontal (landscape) */
@media (orientation: landscape) {
    .message::after {
        content: " - Mode Landscape";
    }
}

/* Ketika HP posisi vertikal (portrait) */
@media (orientation: portrait) {
    .message::after {
        content: " - Mode Portrait";
    }
}

Orientasi saat ini:

Putar HP (atau resize browser dengan rasio berbeda) untuk melihat perubahan orientasi.

Mobile First vs Desktop First

Ada dua pendekatan dalam menulis media query:

Pendekatan	Cara	Kelebihan
Mobile First	Tulis CSS untuk HP dulu, lalu tambahkan `min-width` untuk layar lebih besar	Lebih modern, performa lebih baik di HP
Desktop First	Tulis CSS untuk desktop dulu, lalu tambahkan `max-width` untuk layar lebih kecil	Lebih mudah jika sudah terbiasa desain desktop

Contoh Mobile First:

/* CSS untuk HP (default) */
.container {
    display: block;
    padding: 15px;
}

/* Tablet */
@media (min-width: 768px) {
    .container {
        display: flex;
        gap: 20px;
        padding: 20px;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 30px;
    }
}

Rekomendasi untuk Pemula: Gunakan pendekatan Desktop First (max-width) karena lebih mudah dipahami. Setelah mahir, beralih ke Mobile First untuk performa lebih baik.

Kesalahan Umum Pemula

Lupa menambahkan meta viewport → Media query tidak akan berfungsi optimal di HP tanpa <meta name="viewport" content="width=device-width, initial-scale=1.0">.
Menggunakan px untuk breakpoint yang tidak tepat → Gunakan breakpoint umum (480px, 640px, 768px, 1024px) yang sesuai dengan perangkat nyata.
Terlalu banyak breakpoint -> Cukup 2-3 breakpoint untuk pemula (HP, tablet, desktop).
Lupa menutup kurung kurawal → Media query akan error jika sintaks salah.
Menguji hanya di satu perangkat → Selalu uji di berbagai ukuran dengan Device Toolbar.

Debugging Tips:

Buka Developer Tools (F12) → klik ikon ponsel (Toggle Device Toolbar)
Pilih berbagai perangkat dari dropdown (iPhone SE, Pixel 5, iPad)
Di tab Styles, cek apakah media query aktif (tidak dicoret)
Gunakan console.log(window.innerWidth) untuk mengetahui lebar layar saat ini

Latihan Singkat

Buat file HTML baru dengan judul "Latihan Media Query"
Buat halaman dengan navbar, 3 card, dan footer
Buat media query untuk HP (max-width: 640px): navbar jadi kolom, card jadi 1 kolom
Buat media query untuk tablet (641px - 1024px): card jadi 2 kolom
Desktop (>1024px): card 3 kolom
Uji dengan Device Toolbar di Chrome

Intisari Hari Ini

Media Query → menerapkan CSS berbeda untuk ukuran layar berbeda
@media (max-width: 640px) → gaya untuk HP (layar kecil)
@media (min-width: 1024px) → gaya untuk desktop (layar besar)
@media (min-width: 641px) and (max-width: 1024px) → gaya untuk tablet (rentang)
Breakpoint umum: 480px, 640px, 768px, 1024px, 1200px
Gunakan Device Toolbar di browser untuk menguji responsif
Jangan lupa meta viewport agar media query berfungsi optimal di HP

Tantangan Akhir Pekan: Buat sebuah Halaman Portofolio Lengkap yang responsif dengan media query! Persyaratan:

Minimal 3 breakpoint (HP, tablet, desktop)
Navbar yang berubah menjadi hamburger menu di HP (menggunakan JavaScript untuk toggle)
Grid galeri project (3 kolom di desktop, 2 di tablet, 1 di HP)
About section dengan foto profil dan teks yang berubah layout (flex row di desktop, column di HP)
Footer dengan 3 kolom informasi di desktop, 1 kolom di HP
Gunakan kombinasi Flexbox, Grid, dan Media Query
Tambahkan kotak penjelasan yang menunjukkan semua breakpoint yang digunakan beserta perubahan layoutnya

Bonus: Buat dark mode toggle yang juga responsif terhadap preferensi sistem (@media (prefers-color-scheme: dark)).

Selamat mencoba!

Artikel Sebelumnya: HTML Dasar #34 - Menggunakan Grid CSS untuk Layout Halaman
Artikel Selanjutnya: HTML Dasar #36 - Membuat Navigasi Responsif (Hamburger Menu Sederhana)

HTML Dasar #35 - Media Query: Membuat Tampilan Berubah di HP, Tablet, PC

Apa Itu Media Query?

Sintaks Dasar Media Query

Breakpoint Umum yang Digunakan

1. Media Query untuk HP (max-width)

Contoh:

2. Media Query untuk Desktop (min-width)

Contoh:

3. Media Query dengan Range (min-width AND max-width)

Contoh Tablet (641px - 1024px):

4. Contoh Praktis: Layout Responsif dengan Media Query

5. Menyembunyikan/Menampilkan Elemen dengan Media Query

Contoh:

6. Mengubah Ukuran Font dan Spacing

Contoh:

Judul Artikel

Contoh Proyek: Website Landing Page Responsif

Website Responsive dengan Media Query

Fitur Unggulan

Responsive

Modern

Cepat

Media Query untuk Orientasi (Landscape/Portrait)

Mobile First vs Desktop First

Contoh Mobile First:

Kesalahan Umum Pemula

Latihan Singkat

Intisari Hari Ini

HTML Dasar #0 - Daftar Isi - DASAR-DASAR HTML UNTUK PEMULA

Categories

Main Tags

Latest Posts

Popular Posts

HTML Dasar #0 - Daftar Isi - DASAR-DASAR HTML UNTUK PEMULA

Android Kotlin - Lanjutan dari ASP.NET Core API

Android Kotlin #5: RecyclerView – Menampilkan Daftar Kategori Wisata

نموذج الاتصال