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 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