Kueri media adalah fitur CSS yang memungkinkan konten halaman web untuk beradaptasi dengan berbagai ukuran dan resolusi layar.
Mereka adalah bagian mendasar dari desain web responsif dan digunakan untuk menyesuaikan tampilan situs web untuk beberapa perangkat.
Kueri media dapat dimasukkan dalam HTML halaman web atau termasuk dalam file terpisah.css yang dirujuk oleh halaman web.
Di bawah ini adalah contoh permintaan media sederhana: Layar @Media dan (Max-Width: 768px) { header {height: 70px; } Artikel {font-size: 14px; } img {max-width: 480px; } } Kueri media di atas aktif jika jendela browser pengguna adalah 768 piksel lebar atau kurang.
Ini bisa terjadi jika Anda mengecilkan jendela Anda di komputer desktop atau jika Anda menggunakan perangkat seluler, seperti tablet, untuk melihat halaman web.
Dalam desain web yang responsif, kueri media bertindak sebagai filter untuk ukuran layar yang berbeda.
Seperti semua modul dalam lembar gaya cascading, yang muncul lebih jauh ke bawah daftar menimpa yang di atasnya.
Oleh karena itu, gaya default biasanya didefinisikan pertama dalam dokumen CSS, diikuti oleh kueri media untuk ukuran layar yang berbeda.
Misalnya, gaya desktop mungkin didefinisikan terlebih dahulu, diikuti oleh kueri media dengan gaya untuk pengguna tablet, diikuti oleh kueri media yang dirancang untuk pengguna smartphone.
Gaya juga dapat didefinisikan dalam urutan yang berlawanan, yang dianggap sebagai pengembangan “seluler pertama”.
Sementara Min-Width sejauh ini merupakan fitur paling umum yang digunakan dalam kueri media, banyak lainnya juga tersedia.
Contohnya termasuk Min-Device-Width, Min-Device-Height, Aspect-Ratio, Max-Color-Index, Max-Resolution, Orientation, dan Resolution.
Nilai resolusi, misalnya, dapat digunakan untuk mendeteksi tampilan HIDPI (seperti tampilan retina) dan memuat grafik resolusi tinggi alih-alih gambar standar.
