Definisi Media Queries

Apa Itu Media Queries? Penjelasan Mengenai Media Queries

Kueri media adalah fitur CSS yang memungkinkan webpage konten 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 atau disertakan dalam . CSS file yang dirujuk oleh halaman web. Di bawah ini adalah contoh kueri media sederhana:

@media screen and (max-width: 768px)
{
  header { height: 70px; }
  article { font-size: 14px; }
  img { max-width: 480px; }
}

 

Kueri media di atas diaktifkan jika jendela browser pengguna adalah 768 pixels lebar atau kurang. Ini bisa terjadi jika Anda mengecilkan jendela anda di komputer desktop atau jika anda menggunakan perangkat mobile, seperti tablet, untuk melihat halaman web.

Dalam desain web responsif, kueri media bertindak sebagai filter untuk ukuran layar yang berbeda. Seperti semua modul dalam style sheet cascading, yang muncul lebih jauh ke bawah daftar menimpa yang di atas mereka. Oleh karena itu, gaya default biasanya didefinisikan pertama kali dalam dokumen CSS, diikuti oleh kueri media untuk ukuran layar yang berbeda. Misalnya, gaya desktop dapat didefinisikan terlebih dahulu, diikuti oleh kueri media dengan gaya untuk pengguna tablet, diikuti oleh kueri media yang dirancang untuk smartphone pengguna. Gaya juga dapat didefinisikan dalam urutan yang berlawanan, yang dianggap sebagai pengembangan “mobile first”.

Sementara min-lebar sejauh ini fitur yang paling umum digunakan dalam kueri media, banyak lainnya juga tersedia. Contohnya termasuk min-device-width, min-device-height, aspect-ratio, max-color-index, max-resolution, orientasi, dan resolusi. Nilai resolusi, misalnya, dapat digunakan untuk mendeteksi layar HiDPI (seperti layar retina) dan memuat grafis resolusi tinggi, bukan gambar standar.

Deskripsi istilah Media Queries pada halaman ini adalah definisi asli dari SharTec.eu.
Tujuan dari SharTec.eu adalah untuk menjelaskan terminologi komputer dengan cara yang mudah dimengerti. Kami berusaha untuk kesederhanaan dan akurasi dalam setiap definisi yang kami publikasikan. Jika Anda memiliki komentar tentang deskripsi Kueri Media atau ingin menyarankan istilah teknis baru, silakan hubungi kami.