当媒体查询发生变化时在 JavaScript 中收到通知

媒体查询非常棒，在现代 Web 开发中被广泛使用。
但是，当某个媒体查询被满足时，如何通知 JavaScript 呢？

有一个名为的窗口监听器：matchMedia，它的作用就是完成这个！

这就是我们今天要做的：

JavaScript 媒体查询更改

要使用，matchMedia我们调用以下内容：

var mediaQuery = window.matchMedia('(max-width: 500px)');

为了使用它，我们可以添加监听器：

mediaQuery.addListener(console.log);

现在，如果我们在打开控制台的情况下调整屏幕大小，它将在每个与媒体查询匹配的页面上触发一个控制台日志。

返回将有一个，其中包含一个称为真或假的MediaQueryListEvent值。matches

控制台日志很酷，但它对我们来说并没有太大用处，所以我们还可以附加一个函数：

mediaQuery.addListener(alertMe);

function alertMe(e) {
  if (e.matches) {
    document.body.style.backgroundColor = 'green';
  } else {
    document.body.style.backgroundColor = 'red';
  }
}

现在，如果我们调整大小并点击媒体查询，我们的屏幕将根据是或否变为绿色或红色。

请参阅此 Codepen 中的演示。

有关 MediaQueryList 的更多信息，请参见MDN Web 文档

浏览器支持

这个功能支持得真好！
对于新手来说，绝对值得在项目中使用。

感谢您的阅读，让我们联系起来！

感谢您阅读我的博客。欢迎订阅我的电子邮件简报，并在Facebook或Twitter上与我联系。