Cara Membuat Layout Responsif dengan Media Query CSS

Dunia web modern menuntut tampilan yang responsif, artinya situs web dapat menyesuaikan diri dengan berbagai ukuran layar — mulai dari ponsel, tablet, hingga desktop besar. Dalam hal ini, peran Media Query CSS menjadi sangat penting.

Media Query CSS adalah teknik dalam responsive design CSS yang memungkinkan pengembang menentukan aturan gaya (style) yang berbeda untuk ukuran layar berbeda. Dengan kata lain, kamu bisa mengontrol layout agar tetap nyaman dilihat di semua perangkat.

Artikel ini akan menjadi panduan lengkap cara membuat layout responsif dengan media query CSS, disertai contoh, praktik terbaik, dan tips untuk pemula.

Baca juga: Belajar CSS Z-Index dan Layering Elemen

Apa Itu Media Query CSS?

Media query CSS adalah fitur dalam CSS3 yang memungkinkan kamu menerapkan gaya khusus berdasarkan kondisi perangkat, seperti lebar layar (width), tinggi (height), orientasi (portrait atau landscape), serta resolusi layar.

Sintaks dasarnya seperti berikut:

@media (condition) {
    /* CSS rules di sini */
}Code language: CSS (css)

Contoh:

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

Artinya: jika lebar layar perangkat kurang dari atau sama dengan 768px, maka latar belakang halaman akan berubah menjadi biru muda.

Mengapa Layout Responsif Itu Penting?

Sebelum membahas lebih dalam tentang media query CSS, penting untuk memahami mengapa desain web responsif sangat dibutuhkan:

1. Pengguna Mobile Mendominasi – Lebih dari 60% pengguna internet mengakses web melalui smartphone.
2. SEO Friendly – Google memberi peringkat lebih tinggi untuk situs yang mobile-friendly.
3. User Experience Lebih Baik – Pengguna akan lebih nyaman jika tampilan situs tidak berantakan di perangkat mereka.
4. Hemat Waktu Pengembangan – Daripada membuat versi desktop dan mobile terpisah, CSS responsive layout cukup dengan satu file stylesheet.

Dasar-Dasar Media Query CSS

Media query biasanya ditulis dengan struktur berikut:

@media media-type and (media-feature: value) {
    /* CSS Rules */
}Code language: CSS (css)

• media-type: jenis media seperti screen, print, speech.
• media-feature: kondisi spesifik (misalnya max-width, min-width).

Contoh:

@media screen and (max-width: 600px) {
    .container {
        width: 100%;
    }
}Code language: CSS (css)

Kamu juga bisa menggabungkan beberapa kondisi:

@media (min-width: 480px) and (max-width: 768px) {
    /* CSS di sini hanya berlaku antara 480px - 768px */
}Code language: CSS (css)

Pendekatan Responsive Design: Mobile First vs Desktop First

Mobile First

Pendekatan ini memulai desain dari ukuran layar kecil (mobile), lalu menambahkan media query untuk layar lebih besar.

Contoh:

.container {
    width: 100%;
}

@media (min-width: 768px) {
    .container {
        width: 80%;
    }
}Code language: CSS (css)

Lebih modern, ringan, dan disukai Google.

Desktop First

Kebalikannya, pendekatan ini dimulai dari tampilan desktop, lalu menyesuaikan ke layar lebih kecil menggunakan max-width.

Contoh:

.container {
    width: 80%;
}

@media (max-width: 768px) {
    .container {
        width: 100%;
    }
}Code language: CSS (css)

Pendekatan ini masih umum digunakan, terutama untuk situs lama.

Memahami Breakpoint CSS

Breakpoint adalah titik di mana tampilan situs berubah untuk menyesuaikan ukuran layar.

Contoh breakpoint populer:

Perangkat	Breakpoint
Mobile	max-width: 480px
Tablet	max-width: 768px
Laptop kecil	max-width: 1024px
Desktop	max-width: 1200px

Contoh kode:

@media (max-width: 480px) { /* Smartphone */ }
@media (max-width: 768px) { /* Tablet */ }
@media (max-width: 1024px) { /* Laptop */ }Code language: CSS (css)

Membuat Layout Responsif Sederhana

Mari kita mulai dari contoh layout dua kolom yang akan berubah jadi satu kolom di layar kecil.

<div class="container">
    <div class="sidebar">Sidebar</div>
    <div class="content">Konten utama</div>
</div>Code language: HTML, XML (xml)

.container {
    display: flex;
    gap: 20px;
}

.sidebar {
    flex: 1;
    background: #eaeaea;
}

.content {
    flex: 3;
    background: #f4f4f4;
}

@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
}Code language: CSS (css)

Hasil:

• Pada desktop → layout dua kolom.
• Pada mobile → layout vertikal (satu kolom).

Menggunakan Flexbox untuk Layout Responsif

Flexbox sangat berguna untuk membuat CSS responsive layout karena fleksibel dan mudah diatur.

Contoh:

.wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.box {
    flex: 1 1 45%;
}

@media (max-width: 600px) {
    .box {
        flex: 1 1 100%;
    }
}Code language: CSS (css)

Hasil:

• Layar besar → dua kolom.
• Layar kecil → satu kolom.

Responsive Layout dengan CSS Grid

CSS Grid lebih kuat untuk layout kompleks.

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: 1fr;
    }
}Code language: CSS (css)

Dengan Grid, kamu bisa dengan mudah mengontrol berapa kolom yang muncul di tiap ukuran layar.

Mengatur Typography Responsif

Gunakan satuan relatif seperti em, rem, atau vw untuk font responsif:

h1 {
    font-size: 3vw; /* 3% dari lebar viewport */
}

p {
    font-size: 1rem;
}Code language: CSS (css)

Dengan vw (viewport width), ukuran teks menyesuaikan lebar layar.

Responsive Image dan Video

Gunakan properti CSS berikut agar gambar dan video ikut menyesuaikan ukuran layar:

img, video {
    max-width: 100%;
    height: auto;
}Code language: CSS (css)

Orientation Media Query

@media (orientation: landscape) {
    body {
        background: lightgreen;
    }
}Code language: CSS (css)

Responsive Navbar dengan Media Query

Contoh navbar yang berubah jadi menu toggle di mobile:

<nav class="navbar">
    <ul>
        <li>Beranda</li>
        <li>Tentang</li>
        <li>Kontak</li>
    </ul>
</nav>Code language: HTML, XML (xml)

.navbar ul {
    display: flex;
    gap: 20px;
}

@media (max-width: 768px) {
    .navbar ul {
        flex-direction: column;
        gap: 10px;
    }
}Code language: CSS (css)

Responsive Card Design

Gunakan kombinasi flexbox dan media query untuk membuat card responsive layout:

.cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.card {
    flex: 1 1 calc(33.333% - 20px);
}

@media (max-width: 768px) {
    .card {
        flex: 1 1 100%;
    }
}Code language: CSS (css)

CSS Container Query (Teknik Modern)

Selain media query berbasis viewport, kini tersedia container query CSS, memungkinkan elemen menyesuaikan ukuran kontainernya, bukan layar.

@container (max-width: 600px) {
    .item {
        flex-direction: column;
    }
}Code language: CSS (css)

Teknik ini masih relatif baru tetapi sangat membantu untuk desain modular.

Tips Responsive Design CSS

1. Gunakan unit relatif (%, em, rem, vw, vh).
2. Gunakan max-width pada gambar.
3. Gunakan mobile-first approach.
4. Gunakan CSS Grid/Flexbox untuk layout adaptif.
5. Uji di berbagai perangkat.
6. Gunakan alat seperti Chrome DevTools untuk simulasi layar.

Kesalahan Umum Saat Membuat Responsive Layout

• Tidak menggunakan meta viewport di <head>.
• Menggunakan nilai pixel tetap (px) untuk lebar container.
• Tidak mengatur padding/margin relatif.
• Mengabaikan orientation (landscape vs portrait).
• Terlalu banyak breakpoint tidak perlu.

Contoh Lengkap Responsive Layout (Kode Lengkap)

<!DOCTYPE html>
<html lang="id">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    * {
        box-sizing: border-box;
    }
    body {
        margin: 0;
        font-family: Arial, sans-serif;
    }

    header, footer {
        background: #222;
        color: white;
        text-align: center;
        padding: 20px;
    }

    main {
        display: flex;
        gap: 20px;
        padding: 20px;
    }

    aside {
        flex: 1;
        background: #f0f0f0;
        padding: 15px;
    }

    article {
        flex: 3;
        background: #fff;
        padding: 15px;
    }

    @media (max-width: 768px) {
        main {
            flex-direction: column;
        }
    }
</style>
</head>
<body>
    <header><h1>Belajar Layout Responsif</h1></header>
    <main>
        <aside>Sidebar</aside>
        <article>Konten utama</article>
    </main>
    <footer>&copy; 2025 BahasaWeb</footer>
</body>
</html>Code language: HTML, XML (xml)

Kesimpulan

Membuat layout responsif dengan media query CSS merupakan keterampilan wajib bagi setiap web developer modern. Dengan memahami @media CSS, breakpoint, serta konsep mobile first, kamu bisa membangun situs yang tampil sempurna di semua perangkat.

Ingat, tujuan utama dari responsive design adalah memberikan pengalaman pengguna terbaik tanpa mengorbankan kecepatan dan keindahan tampilan.