How TO - Kueri Media dengan JavaScript
Contoh
Jika area pandang kurang dari, atau sama dengan, lebar 700 piksel, ubah warna latar belakang menjadi kuning. Jika lebih besar dari 700, ubah menjadi pink
function myFunction(x) {
if (x.matches) { // If media
query matches
document.body.style.backgroundColor = "yellow";
} else {
document.body.style.backgroundColor = "pink";
}
}
var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // Call
listener function at run time
x.addListener(myFunction) // Attach listener
function on state changes
Menggunakan Kueri Media Dengan JavaScript
Kueri media diperkenalkan di CSS3, dan merupakan salah satu bahan utama untuk desain web responsif. Kueri media digunakan untuk menentukan lebar dan tinggi area pandang agar halaman web terlihat bagus di semua perangkat (desktop, laptop, tablet, ponsel, dll).
Metode window.matchMedia() mengembalikan objek MediaQueryList yang mewakili hasil string kueri media CSS yang ditentukan. Nilai metode matchMedia() dapat berupa fitur media apa pun dari aturan @media CSS , seperti tinggi minimum, lebar minimum, orientasi, dll.
Pelajari lebih lanjut tentang kueri media di Tutorial Kueri Media CSS kami
Pelajari lebih lanjut tentang desain responsif di Tutorial Desain Web Responsif kami
Pelajari lebih lanjut tentang metode window.matchMedia() di Referensi JavaScript kami.