Dasar Media Query – CSS: "Bikin Webmu Peka, Bukan Cuma Mantan!"

 

Pernah buka website di HP terus tampilannya aneh kayak baju kekecilan? Nah, di sinilah Media Query CSS jadi pahlawan! Media query bikin website kita peka terhadap ukuran layar dan perangkat pengunjung. Jadi, webnya nggak cuma terlihat rapi, tapi juga nyaman—kayak hoodie oversize yang pas di segala suasana.

Apa Itu Media Query?

Media Query adalah fitur di CSS yang bikin kamu bisa bikin aturan khusus berdasarkan kondisi perangkat, seperti:

• Ukuran layar
• Resolusi
• Orientasi (portrait atau landscape)

Ibaratnya, ini kayak bilang ke webmu:

“Kalau pengunjung pakai HP, tampilannya beda, ya! Kalau laptop, tampilannya begini. Kalau TV 50 inci? Hmm, kasih sesuatu yang megah!”

Kenapa Media Query Penting?

Gini nih, zaman sekarang orang buka web pakai banyak perangkat: HP, tablet, laptop, bahkan kulkas pintar (yes, seriously). Media query memastikan web kamu tetap keren di semua layar. Gak mau kan, kalau pengunjung harus zoom in-zoom out cuma buat baca konten?

Cara Kerja Media Query

Media query itu kayak polisi lalu lintas di CSS. Dia cek kondisi perangkat, terus memutuskan CSS mana yang harus dipakai.

Struktur Dasarnya:

@media (kondisi) {
  /* CSS yang berlaku kalau kondisi terpenuhi */
}

Misalnya:

• Kalau layar lebih kecil dari 768px (ukuran HP), tampilkan gaya khusus.
• Kalau layar lebih besar dari 1024px (ukuran desktop), kasih gaya lainnya.

1. Media Query untuk Layar Kecil (HP)

Mau bikin webmu nyaman dilihat di HP? Gunakan media query untuk layar kecil.

Contoh:

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

Artinya:
Kalau lebar layar maksimal 768px, teks diperkecil dan latar belakang jadi biru muda. Webmu bilang, “Hei, aku ramah buat HP, lho!”

2. Media Query untuk Tablet

Tablet punya ukuran layar tanggung—nggak kecil kayak HP, tapi nggak gede juga kayak laptop. Buat aturan khusus biar tampilannya pas.

Contoh:

@media (min-width: 769px) and (max-width: 1024px) {
  body {
    font-size: 16px;
    background-color: peachpuff;
  }
}

Artinya:
Kalau lebar layar antara 769px sampai 1024px, teksnya agak dibesarkan, dan latar belakang jadi peachpuff. Elegan banget, kan?

3. Media Query untuk Desktop

Layar besar butuh cinta juga! Gunakan media query untuk bikin webmu tampil maksimal di desktop.

Contoh:

@media (min-width: 1025px) {
  body {
    font-size: 18px;
    background-color: lightgreen;
  }
}

Artinya:
Kalau layar lebih besar dari 1025px, teksnya jadi lebih besar, dan latar belakang berubah jadi hijau segar. Webmu siap tampil di layar besar dengan percaya diri!

4. Media Query untuk Orientasi

Mau tampilan beda antara layar potret (portrait) dan lanskap (landscape)? Media query bisa bantu!

Contoh:

@media (orientation: landscape) {
  body {
    background-color: lightcoral;
  }
}

Artinya:
Kalau perangkat dalam mode landscape, latar belakang berubah jadi merah muda cerah. Webmu kayak bilang, “Landscape? No problem!”

5. Gabungkan Semua!

Kalau mau bikin web yang responsif banget, gabungkan berbagai media query. Ibaratnya, kamu bikin aturan untuk setiap kondisi cuaca.

Contoh:

body {
  font-size: 16px;
  background-color: white;
}

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

@media (min-width: 769px) and (max-width: 1024px) {
  body {
    font-size: 16px;
    background-color: peachpuff;
  }
}

@media (min-width: 1025px) {
  body {
    font-size: 18px;
    background-color: lightgreen;
  }
}

Hasilnya:
Webmu akan berubah sesuai ukuran layar, kayak bunglon yang bisa adaptasi di mana saja!

Tips Media Query yang Anti Ribet

1. Mulai dari Desain Mobile:
   Gunakan pendekatan mobile-first. Buat gaya dasar untuk HP, lalu tambahkan media query untuk layar yang lebih besar.

2. Gunakan em atau rem untuk Ukuran:
   Ukuran fleksibel bikin tampilan lebih responsif. Jangan terlalu cinta sama px!

3. Cek di Banyak Perangkat:
   Tes tampilan webmu di berbagai perangkat. Jangan sampai webmu keren di laptop, tapi berantakan di HP.

Kesimpulan: Media Query, Jodohnya Desain Responsif!

Dengan Media Query CSS, kamu bisa bikin web yang peka, adaptif, dan terlihat sempurna di segala ukuran layar. Jadi, webmu nggak cuma cantik, tapi juga user-friendly.

Ingat, web yang responsif adalah web yang bikin pengunjung betah. Kalau pengunjung betah, peluang mereka balik lagi makin besar. Jadi, kapan lagi bikin webmu jadi juara adaptasi?