Mendeteksi dalam Javascript status kueri media dengan MediaQueryListEvent – ​​Js Craft

Untuk mendeteksi apakah jendela memenuhi kueri media tertentu, kami menggunakan matchMedia metode.

window.matchMedia('(max-width: 800px)').addListener(
  () => alert("Media query status changed!")
);

Metode pendengar akan dipanggil setiap kali jendela akan berada di bawah / di bawah 800px. Di bawah ini adalah codepen yang berfungsi penuh.

Lihat Pena
JavaScript – kueri media oleh JS Craft (@js-craft)
di CodePen.

Lebih detail tentang matchMedia di sini.

Saya mungkin salah, tetapi dari apa yang saya lihat ini hanya dapat diterapkan pada keseluruhan wadah jendela. Sejauh ini tidak ada dukungan untuk kueri media penampung. Akan menyenangkan untuk dapat menulis sesuatu seperti:

const myContainer = document.querySelector(".my-container");
myContainer.matchMedia('(max-width: 800px)').addListener(
  () => alert("Container media query status changed!")
);