RWD Media Queries

<!DOCTYPE html>
<html>
<head>
    <style>
        .info-layar {
            padding: 20px;
            text-align: center;
            font-family: sans-serif;
            font-weight: bold;
            background: #cbd5e1;
            border-radius: 8px;
        }
        @media (max-width: 576px) {
            .info-layar { background: #fca311; color: #0d2e5c; }
        }
        @media (min-width: 577px) and (max-width: 992px) {
            .info-layar { background: #04AA6D; color: white; }
        }
        @media (min-width: 993px) {
            .info-layar { background: #0d2e5c; color: white; }
        }
    </style>
</head>
<body>
    <div class="info-layar">Ubah Ukuran Jendela Browser Untuk Melihat Perubahan Warna!</div>
</body>
</html>