js实现css的media query方法-使用 MediaQueryListEvent 检测媒体查询的状态

在 Javascript 中使用 MediaQueryListEvent 检测媒体查询的状态

为了检测窗口是否满足特定的媒体查询，css是使用media query，js使用 matchMedia 方法。

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

每当窗口等于或小于 800 像素时，都会调用这个侦听器方法。下面是一个完整的代码。

更多关于 matchMedia 详细信息，请点击此处。

上面只是应用于整个浏览器窗口，那怎么监听容器的大小变化呢？以下代码可以实现：

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

在 Javascript 中使用 MediaQueryListEvent 检测媒体查询的状态

相关推荐

chromium和chrome区别（chromium和chrome分别是什么）

发表评论