Media Query & Responsive Design

Media Query & Responsive Design adalah konsep penting yang wajib dipahami saat kalian ingin membuat tampilan website yang nyaman di berbagai ukuran layar.

Halo teman-teman, di era smartphone dan berbagai ukuran layar seperti sekarang, satu desain saja sering tidak cukup. Tanpa pengaturan yang tepat, layout bisa berantakan saat dibuka di HP, tablet, maupun laptop.

Pada artikel ini kodelyly.com akan membahas dasar-dasar Media Query & Responsive Design, cara kerjanya, serta tips sederhana agar tampilan website kalian tetap rapi di semua perangkat.

Media Query & Responsive Design

Secara singkat, Media Query adalah fitur di CSS yang memungkinkan kalian menerapkan style berbeda berdasarkan kondisi tertentu, misalnya lebar layar, orientasi perangkat, atau resolusi. Sementara Responsive Design adalah pendekatan desain web agar layout otomatis menyesuaikan ukuran layar pengguna.

Dengan menggabungkan Media Query & Responsive Design, kalian bisa:

1. Mengatur ulang layout ketika layar mengecil.
2. Mengubah ukuran font agar tetap mudah dibaca.
3. Menyembunyikan elemen yang tidak penting di layar kecil.

Apa Itu Media Query Di CSS?

Media Query biasanya ditulis menggunakan aturan @media di CSS. Contohnya, jika kalian ingin mengubah style saat layar lebih kecil dari 768px (umumnya ukuran tablet ke bawah), kalian bisa menulis:

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
  .container {
    width: 100%;
    padding: 10px;
  }
}

Kode di atas berarti: ketika lebar layar maksimal 768px, ukuran font body diperkecil dan lebar container dibuat penuh agar lebih pas di layar kecil.

Konsep Dasar Responsive Design

Responsive Design tidak hanya soal memakai Media Query, tetapi juga cara berpikir tentang layout yang fleksibel. Beberapa konsep penting di antaranya:

1. Menggunakan satuan relatif seperti persen, EM, atau REM untuk lebar dan ukuran teks.
2. Menggunakan max-width: 100% pada gambar agar tidak melebar melebihi container.
3. Mengatur layout dengan flexbox atau grid sehingga elemen dapat berpindah posisi dengan rapi.
4. Menentukan breakpoint, yaitu titik lebar layar tertentu di mana style mulai berubah.

Contoh breakpoint yang sering dipakai:

• 1200px ke atas: layar besar (desktop).
• 768px–1199px: tablet dan laptop kecil.
• 767px ke bawah: smartphone.

Contoh Media Query Sederhana

Berikut contoh layout sederhana dengan header dan dua kolom yang akan berubah menjadi satu kolom di layar kecil:

.container {
  display: flex;
  gap: 20px;
}

.sidebar {
  width: 30%;
}

.content {
  width: 70%;
}

@media (max-width: 767px) {
  .container {
    flex-direction: column;
  }
  .sidebar,
  .content {
    width: 100%;
  }
}

Dengan kode tersebut, di layar besar sidebar dan content tampil berdampingan, sedangkan di layar kecil keduanya otomatis menjadi susun ke bawah sehingga lebih nyaman dibaca di HP.

Tips Responsive Design Untuk Pemula

Agar Media Query & Responsive Design kalian lebih maksimal, perhatikan beberapa tips berikut:

1. Mulai dari desain mobile terlebih dahulu (mobile first), lalu kembangkan ke layar yang lebih besar.
2. Uji tampilan website di beberapa ukuran layar menggunakan fitur DevTools di browser.
3. Hindari memberi lebar tetap (fixed width) yang terlalu besar pada elemen utama.
4. Gunakan font yang cukup besar di layar kecil agar teks tetap terbaca.

Baca Juga:
Ukuran dalam CSS: PX, EM, REM, dan VH untuk Desain Web Responsif

Kesimpulan

Media Query & Responsive Design adalah kombinasi penting untuk memastikan website kalian tampil rapi di berbagai perangkat, mulai dari smartphone hingga desktop. Dengan memahami cara kerja @media, konsep breakpoint, serta penggunaan layout fleksibel seperti flexbox atau grid, kalian bisa membuat pengalaman pengguna yang jauh lebih nyaman.

Sekian artikel dari kodelyly.com, semoga pembahasan tentang Media Query & Responsive Design ini membantu kalian yang sedang belajar membuat tampilan web responsif. Sampai jumpa di artikel belajar web berikutnya!