Desain Web Responsif (Responsive Web Design / RWD) bertujuan membuat halaman web terlihat bagus di semua perangkat dengan menyesuaikan lebar layar secara dinamis.
max-width: 100%; height: auto; agar gambar tidak meluber keluar layar.@media screen and (max-width: 600px)).<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.kotak { background: #04AA6D; color: white; padding: 20px; text-align: center; font-size: 20px; font-weight: bold; border-radius: 8px; }
/* Jika layar ponsel kurang dari 600px, warna berubah menjadi biru */
@media screen and (max-width: 600px) {
.kotak { background: #0d2e5c; font-size: 16px; }
}
</style>
</head>
<body>
<div class="kotak">Coba ubah ukuran lebar browser Anda!</div>
</body>
</html>Coba perkecil lebar browser Anda saat menjalankan contoh di atas: warna kotak akan otomatis berganti dari hijau menjadi biru!
Aturan CSS apa yang digunakan untuk menerapkan gaya khusus hanya pada ukuran layar tertentu?