CSS Responsive Media Query

Apa itu media query? Media query adalah fitur yang tersedia di CSS3 untuk memberikan style khusus dengan suatu kondisi tertentu.

Kondisi tertentu tersebut misalnya ukuran layar.

Contoh media query, yang mengatur style jika resolusi layar kurang dari 768px maka warna body diganti merah.

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

Media types

Ada empat tipe media di media query, yaitu:

• all untuk semua device
• print untuk media halaman / dokumen
• screen untuk ukuran layar
• speech untuk fitur voice

Logical operator

Ada empat operator logika yang bisa digunakan, yaitu:

• and digunakan untuk jika 2 atau lebih media tipe terpenuhi
• not jika tidak termasuk media tipe yang dipilih
• only jika hanya sesuai media type yang dipilih
• , (koma) menggabungkna banyak operator logika

Media features

Value	Keterangan
width	Lebar / panjang viewport
update	Seberapa cepat device dapat memperbarui tampilan konten?
scripting	Apakah scripting (js) diperbolehkan?
scan	Proses scanning
resolution	Resolusi device dengan dpi atau dpcm
pointer	Apa ada mekanisme input sebagai pointer? Bagaimana akurasinya?
overflow-inline	Apa bisa konten yang melebihi garis inline discroll?
overflow-block	Bagaimana device mengatasi konten yang melebihi ukuran sepanjang garis blok
orientation	Orintasi device (portrait / landscape)
monochrome	Jumlah bit warna untuk device monokrom
min-width	Minimal panjang viewport
min-resolution	Minimal resolusi viewport
min-monochrome	Jumlah bit minimal untuk device monokrom
min-height	Minimal tinggi viewport
min-color-index	Jumlah warna minimal yang ditampilkan
min-color	Jumlah bit minimal tiap komponen warna
min-aspect-ratio	Minimal aspek rasio lebar dan tinggi
max-width	Maksimal panjang viewport
max-resolution	Maksimal resolusi viewport
max-monochrome	Jumlah bit maksimal untuk device monokrom
max-height	Maksimal tinggi viewport
max-color-index	Jumlah warna maksimal yang ditampilkan
max-color	Jumlah bit maksimal tiap komponen warna
max-aspect-ratio	Aspek rasio maksimal lebar dan tinggi
light-level	Level cahaya sekarang
inverted-colors	Apa browser ada di mode invert warna?
hover	Apa ada cara agar user melakukan hover (mengarahkan kursor) ke elemen?
height	Tinggi viewport
grid	Mengecek apakah perangkat berupa grid atau bitmap
color-index	Jumlah warna yang ditampilkan device
color-gamut	Perkiraan warna yang disupport device
color	Jumlah bit tiap komponen warna untuk device output
aspect-ratio	Rasio lebar dan tinggi viewport
any-pointer	Apa ada mekanisme input sebagai pointer? Bagaimana akurasinya?
any-hover	Apa ada cara agar user melakukan hover (mengarahkan kursor) ke elemen?

Contoh penggunaan

Kasus 1: menyembunyikan element jika dibuka di laptop (resolusi > 768px)

@media screen and (min-width: 768px) {
  div.contoh {
    display: none;
  }
}

Kasus 2: mengganti warna element, jika smartphone warna merah, jika tablet warna hitam, jika desktop warna biru.

div.contoh {background:red}
@media screen and (min-width: 400px) {
 div.contoh {background:black}
}

@media screen and (min-width: 800px) {
 div.contoh {background:blue}
}