Di era mobile-first seperti sekarang, membuat website yang tampil baik di semua ukuran layar adalah keharusan. Media query CSS adalah teknologi kunci untuk mencapai hal tersebut. Dengan media query, kamu bisa menerapkan gaya CSS yang berbeda tergantung pada ukuran layar perangkat pengguna. Artikel ini menjelaskan cara menggunakannya dari awal dengan contoh nyata.
Apa Itu Media Query?
Media query adalah aturan CSS yang memungkinkan kamu menerapkan gaya tertentu hanya ketika kondisi tertentu terpenuhi, seperti lebar layar yang lebih kecil atau lebih besar dari nilai tertentu. Sintaks dasarnya menggunakan kata kunci @media.
Sintaks Dasar Media Query
/* Gaya ini hanya berlaku jika lebar layar maksimal 768px */
@media (max-width: 768px) {
body {
font-size: 14px;
}
}
/* Gaya ini hanya berlaku jika lebar layar minimal 1024px */
@media (min-width: 1024px) {
.container {
max-width: 1200px;
}
}Breakpoint Umum yang Digunakan
Breakpoint adalah titik di mana layout berubah. Berikut breakpoint yang umum dipakai:
- Mobile: max-width 576px
- Tablet: 577px – 768px
- Laptop kecil: 769px – 1024px
- Desktop: 1025px ke atas
/* Mobile */
@media (max-width: 576px) { ... }
/* Tablet */
@media (min-width: 577px) and (max-width: 768px) { ... }
/* Laptop */
@media (min-width: 769px) and (max-width: 1024px) { ... }
/* Desktop */
@media (min-width: 1025px) { ... }Pendekatan Mobile First
Pendekatan yang direkomendasikan adalah mobile first: tulis CSS untuk layar kecil terlebih dahulu, lalu gunakan min-width untuk layar yang lebih besar.
/* Default: untuk mobile */
.container {
padding: 16px;
font-size: 14px;
}
/* Untuk tablet ke atas */
@media (min-width: 768px) {
.container {
padding: 32px;
font-size: 16px;
}
}
/* Untuk desktop */
@media (min-width: 1024px) {
.container {
max-width: 1200px;
margin: 0 auto;
}
}Contoh Praktis: Layout Responsif Dua Kolom
Di mobile tampil satu kolom, di desktop tampil dua kolom:
<div class="wrapper">
<main class="konten">
<h1>Artikel Utama</h1>
<p>Ini adalah konten utama halaman.</p>
</main>
<aside class="samping">
<h2>Widget</h2>
<p>Ini sidebar.</p>
</aside>
</div>
<style>
/* Mobile first: satu kolom */
.wrapper {
display: flex;
flex-direction: column;
gap: 16px;
padding: 16px;
}
/* Desktop: dua kolom */
@media (min-width: 768px) {
.wrapper {
flex-direction: row;
}
.konten {
flex: 2;
}
.samping {
flex: 1;
}
}
</style>Contoh: Menyembunyikan Elemen di Mobile
<div class="sidebar-desktop">
Hanya tampil di desktop
</div>
<style>
.sidebar-desktop {
display: none;
}
@media (min-width: 1024px) {
.sidebar-desktop {
display: block;
}
}
</style>Contoh: Ukuran Font Responsif
h1 {
font-size: 1.5rem; /* mobile */
}
@media (min-width: 768px) {
h1 {
font-size: 2rem; /* tablet */
}
}
@media (min-width: 1024px) {
h1 {
font-size: 2.5rem; /* desktop */
}
}Jangan Lupa Meta Viewport
Agar media query bekerja dengan benar di perangkat mobile, tambahkan tag meta viewport di dalam <head> HTML kamu:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Tanpa tag ini, browser mobile akan merender halaman seolah-olah layarnya selebar desktop dan media query tidak akan bekerja seperti yang diharapkan.
Tips Membuat Website Responsive
- Selalu gunakan satuan relatif seperti
%,em,remdaripadapxuntuk ukuran yang fleksibel. - Gunakan gambar responsif dengan
max-width: 100%agar gambar tidak meluap dari container. - Uji website kamu di berbagai ukuran layar menggunakan DevTools browser (Ctrl+Shift+M di Chrome).
- Hindari terlalu banyak breakpoint — 3 breakpoint sering sudah cukup untuk kebanyakan proyek.
Kesimpulan
Media query adalah fondasi dari desain web responsif. Dengan memahami cara kerja @media, konsep breakpoint, dan pendekatan mobile first, kamu sudah bisa membuat website yang tampil baik di semua ukuran layar. Terapkan contoh-contoh di atas pada proyek kamu dan uji hasilnya di berbagai perangkat untuk memastikan pengalaman pengguna yang optimal.
