JavaScript 中的媒体查询

响应式设计确保内容在所有屏幕尺寸下看起来都不错。

CSS 使用媒体查询来应用基于浏览器属性的各种样式，包括宽度、高度或屏幕分辨率。

CSS 媒体查询应用自定义样式，从而产生了响应式设计。

在 JavaScript 中使用 window.matchMedia() 方法定义媒体查询的条件

如果我们想在浏览器为 480 像素宽时将消息记录到控制台，媒体查询的工作方式与 CSS 类似。

const mediaQuery = window.matchMedia( '( min-width: 480px )' )

matchMedia() 方法返回一个新的 MediaQueryList 对象，然后可以使用该对象来确定文档是否与媒体查询字符串匹配。

它监视文档并检测它何时匹配或中断匹配。然后，当满足此条件时，我们可以触发日志记录到控制台：

if (mediaQuery.matches) {
  console.log('Screen changed and media query matched!')
}

match 接口的 ReadOnly 属性的媒体查询列表是一个布尔值，如果文档当前与媒体查询列表匹配，则返回 true，否则返回 false。

当匹配值发生变化时，可以通过观察 MediaQueryList 中触发的变化事件得到通知。

const mediaQuery = window.matchMedia('(min-width: 480px)');
function handleScreenChange(e) {
  if (e.matches) {
    console.log('Screen changed and media query matched!');
  }
}
mediaQuery.addListener(handleScreenChange);
handleScreenChange(mediaQuery);

输出：

"Screen changed, and media query matched!"

使用此代码的唯一缺点是，如果警报被解除，它只会触发一次。

如果我们更改屏幕宽度并在不刷新的情况下重试，它不会再次触发。我们可以使用一个事件监听器 addListener 来检查更新以避免这个问题。

火焰兔

海报 链接