后端开发教程 - Java、Spring Boot 实战 - msg200.com
使用 JavaScript 进行媒体查询
window.matchMedia API
检查媒体查询是否匹配
监听更新
为什么要使用 JavaScript 的媒体查询？
媒体查询不仅限于 CSS。JavaScript 也可以对其进行响应。这在构建应用程序时非常有用。
如果您正在寻找在 JavaScript 中使用媒体查询的现有解决方案，请查看我的小型库mediaq。
window.matchMedia API
浏览器公开了window.matchMedia方法。它接受媒体查询作为参数并返回一个MediaQueryList对象。
const mediaQueryList = window.matchMedia("only screen and (max-width: 600px");
检查媒体查询是否匹配
对象一旦创建，MediaQueryList就会具有布尔属性matches。随时可以使用该属性检查媒体查询是否匹配。
if (mediaQueryList.matches) {
console.log("It matches!");
} else {
console.log("It doesn't match.");
}
监听更新
除了检查MediaQueryList对象是否匹配之外，您还可以为其附加一个事件监听器。每当媒体查询匹配或不匹配时（例如窗口大小调整、设备方向改变等），监听器都会触发。
由于MediaQueryList继承EventTarget，监听它触发的事件非常简单。
const listener = (event) => {
console.log(event.matches ? "It matches!" : "It doesn't match.");
};
mediaQueryList.addEventListener("change", listener);
删除监听器也同样简单
mediaQueryList.removeEventListener("change", listener);
Internet Explorer 和 Safari (低于 14 版本) 处理这些事件监听器的方式不同。它们使用addListener/removeListener代替。
为了支持这些浏览器，您可以有条件地调用正确的方法。
const listener = (event) => {
console.log(event.matches ? "It matches!" : "It doesn't match.");
};
if (mediaQueryList.addEventListener) {
mediaQueryList.addEventListener("change", listener);
} else {
mediaQueryList.addListener(listener);
}
// For removal
if (mediaQueryList.removeEventListener) {
mediaQueryList.removeEventListener("change", listener);
} else {
mediaQueryList.removeListener(listener);
}
您可以阅读有关浏览器兼容性的更多信息。
为什么要使用 JavaScript 的媒体查询？
通过 CSS 应用时，媒体查询有助于创建响应式布局。它们还允许隐藏网页上的某些元素，并加载更高/更低分辨率的背景图片。
在某些情况下，这还不够。这时可以使用 JavaScript 来进一步优化网页。
想象一下，你的网页中某个组件的计算量很大，而你决定不需要它在较小的屏幕上显示。在 CSS 中，你可以轻松地隐藏它，但它仍然会作为 DOM 的一部分存在，并且仍然会降低你的 Web 应用程序的性能。
@media only screen and (max-width: 480px") {
.component {
display: none; /* The component is hidden but is still part of the webpage.*/
}
}
另一方面，在 JavaScript 中，您可以决定是否将元素附加到文档。
const mediaQueryList = window.matchMedia("only screen and (max-width: 480px");
if (!mediaQueryList.matches) {
// Create/Append the element here
}
另一个用例是针对特定屏幕尺寸加载特定脚本。如果您的应用程序使用大型图库，您可以选择仅在显示图表的桌面尺寸设备上包含它们。
const mediaQueryList = window.matchMedia("only screen and (min-width: 768px");
if (mediaQueryList.matches) {
const script = document.createElement("script");
script.src = "path to JavaScript script";
document.body.appendChild(script);
}
JavaScript 无需使用媒体查询即可检测屏幕分辨率。这适用于一次性检查。使用resize窗口对象上的事件监听更新可能会很耗时。使用媒体查询效率更高。