Bagaimana cara menggunakan media query dengan JavaScript

Halaman sebelumnya Element HTML yang boleh dislipkan
Halaman berikutnya Penyorotan sintaks

Menggunakan media query dengan JavaScript

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

window.matchMedia() Method ini mengembalikan objek MediaQueryList yang mewakili hasil string query media CSS yang ditentukan.matchMedia() Nilai method dapat adalah CSS @media Media feature yang berlaku untuk setiap aturan media, seperti min-height、min-width、orientation dan lain-lain.

Contoh

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

function myFunction(x) {
  if (x.matches) { // Jika media query cocokIf media query matches
    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);
});

Cuba sendiri