CARA MENGGUNAKAN MEDIA QUERY CSS

Media Query adalah fitur penting dalam CSS yang memungkinkan konten web menyesuaikan tampilannya tergantung pada karakteristik peranti, seperti ukuran layar, resolusi atau orientasi. Dalam artikel ini, kita akan membahas bagaimana menggunakan media query CSS dengan cara yang efektif dan efisien.

Sebelum kita mulai, pastikan kamu sudah familiar dengan konsep dasar CSS dan memiliki pemahaman dasar tentang layout web.

Membuat Media Query

Media Query dapat dibuat dalam CSS dengan menggunakan perintah @media. Setelahnya, kamu harus mengisi kondisi tertentu, dan jika kondisi tersebut memenuhi syarat, CSS di dalam blok tersebut akan diterapkan.

Berikut adalah contoh media query yang akan menerapkan gaya CSS jika lebar viewport kurang dari atau sama dengan 600px:

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Memahami Media Features

Media features adalah karakteristik dari peranti output yang bisa kita gunakan dalam media query. Ada banyak media features yang bisa digunakan, beberapa di antaranya adalah:

width dan height

width dan height mengacu pada lebar dan tinggi dari viewport. Ini biasa digunakan untuk mengatur tampilan web di peranti dengan layar yang berbeda-beda.

Contoh penggunaannya:

@media (min-width: 720px) {
  .container {
    width: 700px;
  }
}

orientation

orientation digunakan untuk mendeteksi orientasi layar. Nilai dari orientation ini bisa landscape (layar lebar) atau portrait (layar tegak).

Contoh penggunaannya:

@media (orientation: portrait) {
  body {
    font-size: 1.2em;
  }
}

Jangan takut untuk bereksperimen dengan media features yang berbeda-beda sesuai kebutuhan desain dan fungsi web kamu.

Mengetest Media Query

Untuk menguji apakah media query kamu sudah bekerja atau belum, kamu bisa menggunakan browser modern yang sudah mendukung fitur pengembangan seperti Google Chrome atau Firefox. Kamu bisa merubah ukuran layar, orientasi, dan resolusi pada fitur pengembangan ini untuk melihat bagaimana web kamu merespon.

Pada dasarnya, memahami dan mengimplementasikan media query adalah langkah penting untuk membuat web yang responsif dan ramah pengguna. Dengan berlatih dan bereksperimen, kamu akan semakin mahir dalam menggunakan media query CSS.