Media Queries CSS: Membuat Website Responsif
Apa Itu Media Queries?
Media queries adalah fitur dalam CSS yang memungkinkan kita menerapkan gaya berbeda berdasarkan kondisi perangkat seperti lebar layar, orientasi, resolusi, atau jenis media (misalnya printer). Dengan media queries, kita bisa membuat website yang tampil optimal di semua perangkat — baik itu smartphone, tablet, desktop, maupun saat dicetak.
Menguasai media queries sangat penting karena:
- Membantu menciptakan desain responsif.
- Memastikan pengalaman pengguna tetap konsisten di semua perangkat.
- Meningkatkan performa dan aksesibilitas website.
1. Sintaks Dasar Media Queries
Media queries ditulis menggunakan aturan @media, diikuti oleh kondisi tertentu dan blok CSS yang hanya diterapkan jika kondisi tersebut terpenuhi.
Contoh dasar:
@media not|only media-type and (media-feature) {
/* Aturan CSS di sini */
}
Contoh nyata:
@media screen and (max-width: 768px) {
.container {
flex-direction: column;
}
}
Artinya:
Jika lebar layar ≤ 768px, maka .container akan memiliki flex-direction: column.
2. Jenis-Jenis Media Type
Berikut beberapa nilai umum untuk media-type:
| Nilai | Deskripsi |
|---|---|
| all | Default – berlaku untuk semua perangkat |
| screen | Untuk layar komputer, tablet, ponsel |
| Untuk halaman yang dicetak | |
| speech | Untuk pembaca layar (screen reader) |
| braille | Untuk perangkat Braille |
Contoh:
@media print {
nav, footer {
display: none;
}
}
3. Media Features Umum
Media features digunakan untuk mengecek kondisi tertentu dari perangkat. Beberapa yang sering digunakan:
| Feature | Deskripsi |
|---|---|
| width / min-width / max-width | Lebar viewport |
| height / min-height / max-height | Tinggi viewport |
| orientation | Orientasi layar (portrait atau landscape) |
| aspect-ratio | Rasio aspek layar (lebar : tinggi) |
| resolution | Kualitas layar (dpi, dppx) |
| hover | Apakah perangkat mendukung hover |
| pointer | Jenis alat penunjuk (fine untuk mouse, coarse untuk touchscreen) |
Contoh:
@media screen and (max-width: 480px) and (orientation: portrait) {
body {
font-size: 14px;
}
}
4. Breakpoints Umum untuk Desain Responsif
Breakpoint adalah titik dimana layout mulai berubah sesuai ukuran layar. Berikut beberapa breakpoint umum:
| Ukuran Layar | Penggunaan |
|---|---|
| ≤ 480px | Smartphone potrait |
| 481px – 768px | Smartphone landscape / Tablet kecil |
| 769px – 1024px | Tablet landscape |
| ≥ 1025px | Desktop |
Contoh struktur CSS dengan breakpoints:
/* Default styles - mobile first */
.container {
padding: 10px;
}
/* Tablet */
@media screen and (min-width: 481px) {
.container {
padding: 20px;
}
}
/* Desktop */
@media screen and (min-width: 1025px) {
.container {
max-width: 1200px;
margin: 0 auto;
}
}
5. Menggunakan em vs px vs rem dalam Media Queries
Anda bisa menggunakan satuan apapun dalam media queries, tetapi disarankan menggunakan em karena bersifat relatif terhadap ukuran font browser default (biasanya 16px).
Contoh:
@media (min-width: 30em) { /* ≈ 480px */ }
💡 Gunakan pendekatan mobile-first, yaitu menulis style utama untuk layar kecil, lalu tambahkan media queries untuk layar lebih besar.
6. Menggabungkan Banyak Kondisi
Anda bisa menggabungkan beberapa kondisi menggunakan kata kunci and, not, atau , (koma).
Contoh:
@media screen and (min-width: 600px), print and (orientation: landscape) {
body {
background-color: #f0f0f0;
}
}
Atau dengan not:
@media not print and (color) {
body {
color: black;
}
}
7. Mengatur Viewport pada HTML
Untuk memastikan media queries bekerja dengan benar di perangkat mobile, tambahkan tag berikut di bagian <head> HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Tanpa ini, beberapa perangkat mobile akan menampilkan halaman sebagai versi desktop, sehingga efek responsif tidak berjalan optimal.
8. Contoh Praktis
a. Layout Kolom Tunggal di Mobile
HTML
<div class="konten">Konten Utama</div>
<aside class="sidebar">Sidebar</aside>
CSS
.konten, .sidebar {
width: 100%;
}
@media screen and (min-width: 768px) {
.konten {
width: 70%;
float: left;
}
.sidebar {
width: 30%;
float: right;
}
}
Dengan kode ini, layout akan menjadi satu kolom di layar kecil, dan dua kolom di layar besar.
b. Menyembunyikan Elemen Saat Di-Print
CSS
@media print {
nav, .sidebar {
display: none;
}
body {
font-size: 12pt;
}
}
Tips dan Trik Efektif
- Gunakan pendekatan mobile-first agar performa lebih baik.
- Buat daftar breakpoints konsisten dan gunakan variabel CSS atau preprocessor jika perlu.
- Uji tampilan di berbagai ukuran layar menggunakan developer tools.
- Gunakan em atau rem untuk breakpoints agar lebih fleksibel.
- Gunakan media queries untuk styling cetak agar tampilan lebih rapi saat dicetak.
Kesimpulan
Media queries adalah teknik inti dalam membuat website responsif. Dengan kemampuan menargetkan gaya berdasarkan kondisi perangkat, Anda bisa membuat desain yang adaptif, ramah pengguna, dan mudah dipelihara. Dengan memahami sintaks dan strategi penggunaannya, Anda bisa meningkatkan kualitas tampilan web di berbagai perangkat secara signifikan.
Selanjutnya, kita akan membahas Variabel CSS, yaitu cara membuat kode CSS yang lebih modular, terstruktur, dan mudah dikelola.
💡 Tips Praktis
- Gunakan @media untuk menyesuaikan layout berdasarkan ukuran layar.
- Gunakan @media print untuk styling cetak yang profesional.
- Simpan breakpoints dalam variabel CSS atau dokumentasi internal untuk konsistensi.
- Uji media queries di berbagai perangkat dan browser untuk memastikan kompatibilitas.
