Media querie adalah fitur CSS yang memungkinkan konten halaman web beradaptasi dengan ukuran dan resolusi layar yang berbeda. Mereka adalah bagian mendasar dari desain web responsif dan digunakan untuk menyesuaikan tampilan website untuk beberapa perangkat.
Media querie dapat disisipkan dalam HTML halaman web atau disertakan dalam file .CSS terpisah yang dirujuk oleh halaman web. Di bawah ini adalah contoh media querie sederhana:
@media screen and (max-width: 768px)
{
header { height: 70px; }
article { font-size: 14px; }
img { max-width: 480px; }
}
Media queries di atas aktif jika jendela browser pengguna memiliki lebar 768 piksel atau kurang. Ini dapat terjadi jika Anda mengecilkan jendela di komputer desktop atau jika Anda menggunakan perangkat seluler, seperti tablet, untuk melihat laman web.
 |
| Media Querie pada beberapa perangkat |
Dalam desain web responsif, Media querie bertindak sebagai filter untuk berbagai ukuran layar. Seperti semua modul dalam cascading style sheet (CSS), modul yang muncul lebih jauh di bawah daftar menimpa yang di atasnya. Oleh karena itu, gaya default biasanya ditentukan terlebih dahulu dalam dokumen CSS, diikuti oleh media querie untuk ukuran layar yang berbeda. Misalnya, gaya desktop mungkin ditentukan terlebih dahulu, diikuti oleh media querie dengan gaya untuk pengguna tablet, diikuti oleh media querie yang dirancang untuk penggunasmartphone. Style juga dapat didefinisikan dalam urutan yang berlawanan, yang dianggap sebagai pengembangan "mobile first".
Sementara min-width sejauh ini merupakan fitur paling umum yang digunakan dalam media querie, banyak fitur lainnya juga tersedia. Contohnya termasuk min-device-width, min-device-height, aspect-ratio, max-color-index, max-resolution, orientation, dan resolution. Nilai resolution, misalnya, dapat digunakan untuk mendeteksi layar HiDPI (seperti retina display) dan memuat grafik resolusi tinggi alih-alih gambar standar.