Panduan CSS Media Queries: Cara Membuat Website Responsif untuk Pemula - MafiaTek

Pernah buka website dari HP tapi tampilannya berantakan? Atau harus zoom in zoom out hanya untuk membaca teks? Nah, itu karena websitenya belum responsif. Salah satu cara untuk membuat website menyesuaikan ukuran layar adalah dengan CSS Media Queries.

Di artikel ini, kamu akan belajar:

• Apa itu media queries?
• Kenapa penting untuk web responsif?
• Cara menggunakannya dengan contoh sederhana.
• Tips umum agar desain tetap rapi di berbagai perangkat.

---

Picture by Pixabay

Apa Itu CSS Media Queries?

Media queries adalah fitur di CSS yang memungkinkan kamu menerapkan gaya berbeda berdasarkan ukuran layar, jenis perangkat, atau bahkan orientasi layar (portrait atau landscape).

Misalnya, kamu bisa membuat ukuran teks lebih kecil jika website dibuka dari layar HP, dan lebih besar jika dibuka dari laptop atau tablet.

Kenapa Media Queries Itu Penting?

Dunia digital sekarang tidak cuma diakses lewat komputer. Ada tablet, smartphone, bahkan smart TV. Dengan media queries, kamu bisa memastikan tampilan website tetap nyaman dan enak dilihat, tanpa membuat versi website terpisah untuk setiap jenis perangkat.

Dasar Penulisan Media Queries

Struktur umumnya seperti ini:

@media (kondisi) {
    /* CSS yang hanya berlaku untuk kondisi ini */
}

Contoh paling umum:

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

    h1 {
        font-size: 20px;
    }
}

Penjelasan:

• max-width: 768px artinya aturan ini hanya berlaku jika lebar layar maksimal 768px (biasanya ukuran tablet ke bawah).
• Kamu bisa menyesuaikan warna, ukuran font, padding, dan lainnya sesuai kebutuhan.

---

Contoh Kasus: Mengatur Layout Mobile

Bayangkan kamu punya layout seperti ini:

<div class="container">
    <div class="box">Konten 1</div>
    <div class="box">Konten 2</div>
</div>

Dan CSS awalnya:

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

.box {
    background: lightblue;
    padding: 20px;
    width: 50%;
}

Di layar lebar (seperti laptop), kontennya berdampingan. Tapi kalau dibuka di HP, tampilannya terlalu sempit. Maka tambahkan media queries:

@media (max-width: 600px) {
    .container {
        flex-direction: column;
    }

    .box {
        width: 100%;
    }
}

Hasilnya: di HP, konten akan tampil bertumpuk rapi ke bawah, tidak saling berhimpitan.

Tips Umum Menggunakan Media Queries

1. Gunakan breakpoints yang umum, seperti:
   
   • max-width: 1200px untuk desktop besar
   • max-width: 992px untuk laptop
   • max-width: 768px untuk tablet
   • max-width: 576px untuk smartphone
2. Uji tampilan di berbagai perangkat: kamu bisa pakai fitur DevTools di browser (tekan F12 → toggle device toolbar).
3. Gunakan em/rem daripada px: Satuan ini lebih fleksibel dan menyesuaikan dengan ukuran teks browser.
4. Prioritaskan mobile (Mobile First Design): Tulis gaya dasar untuk mobile dulu, lalu gunakan media queries untuk menyesuaikan ke layar yang lebih besar.

---

Kesimpulan

Dengan CSS Media Queries, kamu bisa membuat website yang tampak profesional dan nyaman diakses di perangkat apa pun. Ini adalah langkah penting untuk meningkatkan pengalaman pengguna sekaligus memperbaiki performa SEO karena Google lebih menyukai website yang responsif.

Sudah siap mencoba di website kamu? Jangan ragu untuk bereksperimen dengan warna, layout, dan font agar tampilannya makin menarik!