Menggunakan Kueri Media Dengan JavaScript
Kueri media diperkenalkan di CSS3 dan merupakan salah satu bahan utama untuk desain web yang responsif. Kueri media digunakan untuk menentukan lebar dan tinggi area pandang untuk membuat halaman web terlihat bagus di semua perangkat (desktop, laptop, tablet, ponsel, dll.).
Metode window.matchMedia() digunakan untuk mengembalikan objek MediaQueryList yang mewakili hasil string kueri media CSS yang ditentukan. Nilai metode matchMedia() dapat berupa fitur media apa pun dari aturan CSS @media, seperti min-height, min-width, orientation, dll.
Contoh
Jika area pandang lebih kecil dari atau sama dengan lebar 700 piksel, ubah warna latar belakang menjadi biru. Jika lebih besar dari 700, ubah menjadi merah:
function myFunction(x) {
if (x.matches) { // Jika kueri media cocok
document.body.style.backgroundColor = "blue";
} else {
document.body.style.backgroundColor = "red";
}
}
var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // Panggil fungsi listener pada saat dijalankan
x.addListener(myFunction) // Lampirkan fungsi listener pada perubahan status<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <p> Jika area pandang lebih kecil dari atau sama dengan, lebar 700 piksel, warna latar belakang akan menjadi biru. Jika lebih dari 700, maka akan berubah menjadi merah. </p> <p> <strong> Ubah ukuran jendela browser untuk melihat efeknya. </strong> </p> <script> function myFunction(x) { if (x.matches) { // Jika kueri media cocok document.body.style.backgroundColor = "blue"; } else { document.body.style.backgroundColor = "red"; } } var x = window.matchMedia("(max-width: 700px)") myFunction(x) // Panggil fungsi listener pada saat dijalankan x.addListener(myFunction) // Lampirkan fungsi listener pada perubahan status </script> </body> </html>
