Anda dapat menggunakan Media Queries dalam CSS untuk menerapkan tampilan responsif pada halaman web. Media Queries memungkinkan Anda mengubah gaya elemen berdasarkan ukuran layar dan perangkat yang digunakan oleh pengguna.
Berikut adalah contoh penggunaan Media Queries untuk tampilan responsif:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
<style>
/* CSS umum */
h1 {
font-size: 24px;
}
p {
font-size: 16px;
}
/* CSS responsif menggunakan Media Queries */
@media (max-width: 600px) {
h1 {
font-size: 20px;
}
p {
font-size: 14px;
}
}
</style>
</head>
<body>
<h1>Judul Artikel</h1>
<p>Ini adalah paragraf artikel yang menarik.</p>
</body>
</html>Dalam contoh di atas, kita menggunakan Media Queries untuk mengatur tampilan responsif pada elemen <h1> dan <p>. Ketika lebar layar kurang dari atau sama dengan 600 piksel, gaya CSS di dalam blok Media Queries akan diterapkan.
- Pada gaya CSS umum di luar Media Queries, kita mengatur ukuran font untuk
<h1>menjadi 24 piksel dan untuk<p>menjadi 16 piksel. - Di dalam blok Media Queries, kita mengubah ukuran font untuk
<h1>menjadi 20 piksel dan untuk<p>menjadi 14 piksel saat lebar layar kurang dari atau sama dengan 600 piksel.
Dengan menggunakan Media Queries, Anda dapat menyesuaikan gaya elemen sesuai dengan ukuran layar yang berbeda, sehingga halaman web Anda akan responsif dan dapat menyesuaikan tampilan dengan baik di berbagai perangkat. Anda dapat mengatur Media Queries untuk menyesuaikan banyak properti CSS lainnya seperti lebar, tinggi, tata letak, dan banyak lagi.
