JavaScript 中的媒体查询

Shraddha Paghdar 2022年5月10日
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 来检查更新以避免这个问题。

Shraddha Paghdar avatar Shraddha Paghdar avatar

Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.

LinkedIn