Responsive Design

Responsive Design adalah pendekatan desain web yang membuat halaman web terlihat baik di semua perangkat dengan ukuran layar yang berbeda.

Viewport Meta Tag

Tag ini harus ada di bagian <head> untuk memastikan halaman web responsif di perangkat mobile:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Penjelasan:

width=device-width - Lebar halaman disesuaikan dengan lebar perangkat
initial-scale=1.0 - Zoom awal 100%
maximum-scale=1.0 - Mencegah zoom (tidak direkomendasikan untuk aksesibilitas)
user-scalable=no - Mencegah zoom (tidak direkomendasikan)

Media Queries

Media queries memungkinkan kita menerapkan CSS berbeda berdasarkan karakteristik perangkat, terutama lebar layar.

/* CSS default untuk mobile first */
.container {
    width: 100%;
    padding: 10px;
}

/* Untuk layar lebih besar dari 600px */
@media (min-width: 600px) {
    .container {
        width: 80%;
        margin: 0 auto;
    }
}

/* Untuk layar lebih besar dari 900px */
@media (min-width: 900px) {
    .container {
        width: 70%;
        max-width: 1200px;
    }
}

Breakpoint Umum

Berikut adalah breakpoint umum yang digunakan:

/* Small devices (phones, 576px and up) */
@media (min-width: 576px) { ... }

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { ... }

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { ... }

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }

Media Query Lainnya

/* Untuk orientasi landscape */
@media (orientation: landscape) { ... }

/* Untuk perangkat dengan resolusi tinggi */
@media (min-resolution: 2dppx) { ... }

/* Untuk mode gelap */
@media (prefers-color-scheme: dark) { ... }

/* Untuk mengurangi motion */
@media (prefers-reduced-motion: reduce) { ... }

Unit Responsif

Pemilihan unit yang tepat penting untuk layout yang responsif:

Unit	Deskripsi	Contoh
`%`	Persentase relatif terhadap parent	`width: 80%;`
`vw`, `vh`	Persentase viewport width/height	`width: 100vw;`
`rem`	Relatif terhadap font-size root	`font-size: 1.5rem;`
`em`	Relatif terhadap font-size parent	`padding: 2em;`
`fr`	Unit fractional untuk CSS Grid	`grid-template-columns: 1fr 2fr;`
`min()`, `max()`, `clamp()`	Fungsi untuk nilai responsif	`width: clamp(300px, 50%, 800px);`

/* Contoh penggunaan unit responsif */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    font-size: clamp(16px, 2vw, 20px);
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.card {
    padding: 1.5rem;
    margin-bottom: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}

Gambar Responsif

Beberapa teknik untuk membuat gambar responsif:

1. CSS max-width

img {
    max-width: 100%;
    height: auto;
}

2. Element picture

<picture>
    <source media="(min-width: 1200px)" srcset="large.jpg">
    <source media="(min-width: 768px)" srcset="medium.jpg">
    <img src="small.jpg" alt="Deskripsi gambar">
</picture>

3. srcset dan sizes

<img 
    src="small.jpg" 
    srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
    sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px"
    alt="Deskripsi gambar"
>

Mobile First vs Desktop First

Mobile First

Mulai dengan styling untuk perangkat mobile, lalu tambahkan styling untuk layar yang lebih besar:

/* Default untuk mobile */
.container {
    padding: 10px;
}

/* Tablet */
@media (min-width: 768px) {
    .container {
        padding: 20px;
    }
}

/* Desktop */
@media (min-width: 992px) {
    .container {
        padding: 30px;
    }
}

Desktop First

Mulai dengan styling untuk desktop, lalu sesuaikan untuk layar yang lebih kecil:

/* Default untuk desktop */
.container {
    padding: 30px;
}

/* Tablet */
@media (max-width: 991px) {
    .container {
        padding: 20px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .container {
        padding: 10px;
    }
}

Best Practice: Gunakan pendekatan Mobile First karena lebih mudah menambahkan kompleksitas daripada menguranginya.

Praktik Mandiri

Coba buat layout responsif berikut:

/* Mobile First Approach */
.container {
    width: 100%;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.box {
    padding: 20px;
    background: lightblue;
    border-radius: 8px;
}

/* Tablet */
@media (min-width: 768px) {
    .container {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .box {
        flex: 1 1 calc(50% - 15px);
    }
}

/* Desktop */
@media (min-width: 992px) {
    .box {
        flex: 1 1 calc(33.333% - 15px);
    }
    
    .featured {
        flex: 2 1 calc(66.666% - 15px);
    }
}

Hasil:

Ubah ukuran browser Anda untuk melihat efek responsif

Box 1

Box 2

Featured Box

Box 4

Box 5