Halo teman-teman semuanya, setelah sebelumnya kita belajar tentang CSS Grid untuk membangun layout dua dimensi, kini saatnya kita menjadikan halaman web kita responsif, agar tampil dengan baik di berbagai ukuran layar — dari ponsel, tablet, hingga desktop.
Untuk itu, kita akan belajar menggunakan media query, fitur penting dalam CSS untuk membuat desain yang fleksibel dan adaptif.
Apa Itu Responsive Design?
Responsive design adalah pendekatan dalam membangun website agar tampilan dan struktur halaman bisa menyesuaikan ukuran layar pengguna, tanpa perlu membuat versi terpisah untuk tiap perangkat.
Apa Itu Media Query?
Media query adalah fitur dalam CSS yang memungkinkan kita menerapkan style hanya ketika kondisi tertentu terpenuhi, misalnya:
- Ukuran layar tertentu
- Orientasi perangkat (portrait atau landscape)
- Resolusi layar
Sintaks Dasar Media Query
@media (max-width: 768px) {
/* CSS khusus layar kecil */
}
Keterangan:
(max-width: 768px) berarti aturan CSS di dalamnya hanya berlaku untuk layar dengan lebar maksimal 768px, cocok untuk tablet dan ponsel.
Contoh: Ubah Layout Saat Layar Kecil
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
}
}
Penjelasan:
- Di layar besar: 3 kolom
- Di layar kecil: berubah jadi 1 kolom
Media Query Lainnya
Kita bisa menargetkan berbagai kondisi:
/* Hanya untuk layar lebih dari 1024px */
@media (min-width: 1024px) {
body {
background-color: lightgreen;
}
}
/* Untuk orientasi portrait */
@media (orientation: portrait) {
body {
font-size: 18px;
}
}
Contoh Lengkap
Contoh berikut menampilkan tiga kotak horizontal di layar lebar, lalu berubah menjadi vertikal di layar kecil.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Media Query Responsive</title>
<style>
body {
font-family: sans-serif;
margin: 20px;
}
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.box {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
border-radius: 8px;
font-weight: bold;
}
/* Media Query untuk layar kecil */
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<h1>Layout Responsive dengan Media Query</h1>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
</body>
</html>
Tiga kotak disusun horizontal menggunakan Grid. Ketika lebar layar kurang dari 768px, layout berubah menjadi satu kolom. Ini adalah contoh dasar responsive design menggunakan media query.**
Kesimpulan
Dengan menggunakan media query, kita bisa membuat halaman web yang adaptif dan nyaman di berbagai ukuran layar. Ini adalah inti dari responsive design, yang penting dalam era perangkat mobile saat ini.
Media query bekerja dengan logika kondisi seperti max-width, min-width, atau orientation, dan bisa dikombinasikan dengan semua properti CSS yang sudah kita pelajari.
Terima Kasih