Bagaimana menggunakan media query dengan JavaScript

Halaman sebelumnya Elemen HTML yang dapat diseret
Halaman berikutnya Peninggalian kalimat

Menggunakan media query dengan JavaScript

Media query diperkenalkan di CSS3 dan adalah salah satu elemen kunci desain web berespon. Media query digunakan untuk menentukan lebar dan tinggi viewport, sehingga laman dapat ditampilkan dengan baik di semua perangkat (desktop, laptop, tablet, ponsel, dll.).

window.matchMedia() metode ini mengembalikan objek MediaQueryList yang mewakili hasil string media query CSS yang ditentukan.matchMedia() nilai yang dapat diambil metode CSS @media media feature rule yang mana saja, seperti min-height、min-width、orientasi dll.

Contoh

Jika lebar layar kurang dari atau sama dengan 700 pixel, ubah warna latar menjadi kuning. Jika lebar lebih besar dari 700, ubahnya menjadi merah muda:

function myFunction(x) {
  if (x.matches) { // Jika media query cocok
    document.body.style.backgroundColor = "yellow";
  } else {
    document.body.style.backgroundColor = "pink";
  }
}
// Membuat objek MediaQueryList
var x = window.matchMedia("(max-width: 700px)")
// Memanggil fungsi pendengar saat berjalan
myFunction(x);
// Menambahkan fungsi pendengar saat ada perubahan status
x.addEventListener("change", function() {
  myFunction(x);
});

Coba sendiri