Menerapkan tata letak responsif dengan media queries CSS adalah teknik penting dalam desain web modern. Media queries memungkinkan Anda untuk mengatur tampilan dan tata letak suatu halaman web berdasarkan ukuran layar atau perangkat yang digunakan oleh pengguna. Ini memastikan bahwa situs web Anda dapat menyesuaikan diri dengan berbagai perangkat, seperti desktop, tablet, dan ponsel cerdas.
Berikut adalah contoh penerapan tata letak responsif dengan media queries dalam CSS:
Struktur Dasar HTML
Mulai dengan struktur dasar HTML untuk halaman Anda, termasuk elemen-elemen yang ingin Anda buat responsif. Misalnya, kita akan menggunakan elemen div untuk mengatur konten dalam beberapa bagian yang berbeda.
<!DOCTYPE html>
<html>
<head>
<title>Tata Letak Responsif</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="section">Bagian 1</div>
<div class="section">Bagian 2</div>
<div class="section">Bagian 3</div>
</div>
</body>
</html>
Baca Juga: Menggunakan CSS Inline, Internal, dan Eksternal
CSS untuk Tata Letak Responsif
Selanjutnya, buat file CSS terpisah atau gunakan inline CSS untuk mengatur tata letak responsif. Dalam contoh ini, kita akan menggunakan file eksternal yang disimpan sebagai “styles.css”.
/* Tata letak dasar untuk bagian */
.section {
padding: 20px;
text-align: center;
}
/* Media queries untuk perangkat dengan lebar layar maksimum 600px */
@media screen and (max-width: 600px) {
.container {
flex-direction: column;
}
.section {
margin-bottom: 20px;
}
}
/* Media queries untuk perangkat dengan lebar layar maksimum 900px */
@media screen and (max-width: 900px) {
.section {
font-size: 18px;
}
}
Dalam contoh di atas, kami menggunakan media queries untuk mengubah tata letak dan tampilan elemen pada layar dengan lebar maksimum 600px dan 900px. Ketika layar memiliki lebar maksimum 600px, kita mengatur tata letaknya agar elemen berada dalam satu kolom, dan kita menambahkan margin antara bagian-bagian. Ketika layar memiliki lebar maksimum 900px, kita menurunkan ukuran font dari bagian-bagian tersebut.
Baca Juga: Daftar Isi Tutorial HTML dan CSS
Anda dapat menyesuaikan properti CSS dan aturan media queries sesuai dengan kebutuhan desain responsif Anda. Media queries memungkinkan Anda untuk menargetkan berbagai ukuran layar dan menyesuaikan tata letak dan tampilan situs web Anda.
