BAB 14 – RESPONSIVE DESIGN & MEDIA QUERY

Bydeka Juni 15, 2026

Pengertian

Responsive Design adalah teknik agar website dapat menyesuaikan berbagai ukuran layar.

Media Query digunakan untuk mengubah tampilan berdasarkan ukuran layar.

@media(max-width:768px){

    body{
        background:lightblue;
    }

}

Jika layar kurang dari 768px maka background berubah.

.container{
    display:flex;
}

@media(max-width:768px){

    .container{
        flex-direction:column;
    }

}

Desktop:

HTML CSS JS

Mobile:

HTML
CSS
JS

Buat 3 kartu produk:

Desktop:

[1][2][3]

Mobile:

[1]
[2]
[3]