Responsive Web Design

CSS Responsive Biar Web Kamu Tetap Rapi di Semua Device

Pernah nggak sih kamu sudah begadang bikin website di laptop, tampilannya sudah aesthetic parah dan punya main character energy, tapi pas dicoba buka di HP temen malah berantakan? Tulisan bertumpuk, gambar kegedean, dan navigasi hilang entah ke mana. Rasanya kayak lagi ghosting gebetan; sakit tapi nggak berdarah.

Di dunia web development, fenomena ini disebut "tampilan kaku". Solusinya? Responsive Web Design (RWD). Ini adalah cara biar website kamu bisa beradaptasi secara otomatis, mau dibuka di MacBook Pro terbaru sampai iPhone versi paling mini sekalipun.

1. Konsep Dasar: Be Water, My Friend

Bayangkan website kamu itu seperti air. Kalau kamu tuang air ke gelas, dia jadi bentuk gelas. Kalau kamu tuang ke botol, dia jadi bentuk botol. Itulah inti dari Fluid Grid dan Flexible Images.

Fluid Grid: Jangan lagi pakai satuan kaku seperti px (pixel) untuk lebar container. Gunakan satuan relatif seperti % (persentase) atau vw (viewport width). Jadi, kalau layar mengecil, elemen kamu ikut menyusut secara proporsional.
Flexible Images: Biar gambar kamu nggak "pecah" atau keluar jalur, gunakan rule sederhana: max-width: 100%;. Ini ibarat memakai baju oversize; dia akan menyesuaikan bentuk tubuh tanpa memaksa ukurannya jadi aneh.

2. Media Queries Level 4 & 5: Update Version

Kalau dulu kita pakai max-width atau min-width yang kadang bikin pusing logikanya, sekarang CSS sudah punya "New Patch" yaitu Media Query Level 4 dan 5. Penulisannya jauh lebih manusiawi karena menggunakan operator perbandingan matematika (<, >, <=, >=).

Ini adalah cara yang memberikan instruksi spesifik. Kamu bisa bilang ke CSS: "Eh, kalau layarnya lebih kecil atau sama dengan 768px, tolong ubah susunan menunya ya."

Syntax Modern: @media (width <= 768px) jauh lebih mudah dibaca daripada @media (max-width: 768px).
Level 5 Feature: Kita juga bisa mendeteksi preferensi user, misalnya apakah mereka pakai Dark Mode atau tidak, menggunakan prefers-color-scheme.

3. Cheat Code: Flexbox & Grid

Dulu, mengatur tata letak (layout) website itu ribet banget. Sekarang, kita punya Flexbox dan CSS Grid. Anggap saja ini sebagai cheat code untuk mengatur posisi elemen tanpa perlu pusing menghitung sisa pixel secara manual.

Flexbox: Cocok untuk mengatur elemen dalam satu baris atau satu kolom (misal: menu navigasi).
CSS Grid: Senjata paling ampuh untuk membuat layout dua dimensi yang kompleks (seperti galeri foto atau dashboard).

4. Contoh : Website Responsif Sederhana

Yuk, langsung praktek. Silakan copy-paste kode di bawah ini. Kita akan menggunakan Range Syntax (Level 4) dan User Preference (Level 5) tanpa menggunakan nested style agar kodenya tetap bersih dan mudah kamu pahami.

index.html

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Slay Everywhere</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="main-header">
        <h1>My Aesthetic Web</h1>
        <nav class="main-nav">
            <ul class="nav-list">
                <li>Home</li>
                <li>Project</li>
                <li>About</li>
            </ul>
        </nav>
    </header>

    <main class="grid-container">
        <section class="card">Card 1</section>
        <section class="card">Card 2</section>
        <section class="card">Card 3</section>
    </main>
</body>
</html>

style.css

/* 1. RESET & BASE STYLE */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: sans-serif;
    padding: 20px;
    line-height: 1.6;
    background-color: white; /* Default Light Mode */
    color: black;
}

/* 2. LAYOUT DESKTOP (DEFAULT) */
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #333;
    color: white;
    padding: 1rem 2rem;
    margin-bottom: 20px;
}

.nav-list {
    display: flex;
    list-style: none;
    gap: 20px;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Tiga kolom di layar lebar */
    gap: 20px;
}

.card {
    background: #f4f4f4;
    padding: 50px;
    text-align: center;
    border: 2px solid #ddd;
    border-radius: 10px;
    color: black;
}

/* 3. MEDIA QUERY LEVEL 4 (RESPONSIVE) */
/* Jika lebar layar kurang dari atau sama dengan 768px (Tablet/HP) */
@media (width <= 768px) {
    .main-header {
        flex-direction: column;
        text-align: center;
    }

    .nav-list {
        margin-top: 15px;
    }

    .grid-container {
        grid-template-columns: 1fr; /* Jadi satu kolom saja */
    }
}

/* 4. MEDIA QUERY LEVEL 5 (USER PREFERENCE) */
/* Otomatis berubah jadi Dark Mode kalau HP user settingannya Dark Mode */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #1a1a1a;
        color: #f4f4f4;
    }

    .card {
        background-color: #333;
        border-color: #444;
        color: white;
    }
}

5. Closing: Jangan Takut Berantakan

Coding itu soal eksplorasi. Jangan takut kalau pertama kali mencoba tampilannya masih sedikit "mleyot". Yang penting, kamu paham logikanya. Penggunaan operator < atau <= di Media Query Level 4 bikin hidup kita jauh lebih simpel, kan?

Ingat, website yang bagus bukan cuma yang tampilannya cantik di monitor 4K, tapi yang tetap fungsional di layar HP retak sekalipun. Stay curious and keep building!