Css3 (Foto: Text Formatting: Text-Align, Text-Decoration, Text-Transform, Letter-Spacing.)

Media Queries Dasar: Membangun Web yang Adaptif

Konsep utama dari Media Queries adalah: "Jika kondisi layar (X) terpenuhi, maka jalankan kode CSS (Y)."

1. Sintaks Dasar @media

Aturan ini biasanya diletakkan di bagian bawah file CSS Anda atau dalam file terpisah.

@media screen and (max-width: 768px) { /* Kode CSS di sini hanya akan aktif jika lebar layar 768px atau lebih kecil */ body { background-color: lightblue; }
}

Komponen Media Query:

• Media Type (screen): Menargetkan layar digital (bisa juga print untuk hasil cetak).

• Media Feature (max-width): Kondisi yang harus dipenuhi.

• Logical Operators (and, not, only): Untuk menggabungkan beberapa kondisi.< /p>

2. Memahami Breakpoints

Breakpoints adalah titik di mana tampilan website berubah untuk menyesuaikan dengan ukuran layar baru. Tidak ada angka baku, namun standar yang sering digunakan adalah:

• 576px: Smartphone (Portrait)

• 768px: Tablet / Smartphone (Landscape)

• 992px: Laptop / Desktop Kecil

• 1200px+: Desktop Besar / Monitor Wide

3. Strategi Mobile-First Design

Ini adalah praktik di mana Anda menulis kode CSS untuk layar terkecil dahulu sebagai default, lalu menggunakan Media Query untuk menambahkan fitur pada layar yang lebih besar.

Mengapa Mobile-First?

1. Performa: Beban CSS lebih ringan untuk perangkat mobile.

2. Fokus: Memaksa Anda memprioritaskan konten yang paling penting.

3. Masa Depan: Pengguna internet saat ini mayoritas menggunakan perangkat seluler.

Contoh Mobile-First:

/* Style Default (untuk Mobile) */
.container { width: 100%; padding: 10px;
} /* Style untuk Tablet ke atas */
@media (min-width: 768px) { .container { width: 750px; margin: 0 auto; }
}

Tutorial: Responsif Sederhana untuk Kartu Berita

Mari kita terapkan pada komponen artikel di riwara.id. Kita ingin di mobile kartu berjejer satu per satu, tapi di desktop berjejer tiga.

Kode CSS

/* Layout Default (Mobile) */
.news-item { display: block; width: 100%; margin-bottom: 20px;
} /* Layout Desktop (Layar > 992px) */
@media (min-width: 992px) { .news-container { display: flex; gap: 20px; } .news-item { flex: 1; /* Membagi rata 3 kolom */ }
}

Tips Pro untuk Developer

1. Gunakan Meta Viewport: Pastikan tag ini ada di dalam HTML Anda, jika tidak, Media Queries mungkin tidak akan bekerja pada perangkat mobile asli:

2. Breakpoints Berdasarkan Konten: Alih-alih mengikuti ukuran layar iPhone atau Samsung secara spesifik, tambahkan breakpoint ketika tampilan website Anda mulai terlihat "aneh" atau sulit digunakan saat ditarik manual di browser.

3. Gunakan Unit Em/Rem: Untuk hasil yang lebih akurat dan aksesibel, pertimbangkan menggunakan satuan em (misal 48em daripada 768px) pada media query agar layout merespons perubahan ukuran font sistem pengguna.