JavaScript 中的媒体查询
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
如今，您的 Web 应用程序可以在各种屏幕尺寸上查看——从小屏幕手机到大屏幕 4K 显示器。幸运的是，CSS 允许我们使用媒体查询，根据多种变量添加特定的样式。但有时，仅仅使用媒体查询并不足以达到目标。这时，它matchMedia就能派上用场了。
matchMedia是提供的一种方法，window可以确定给定的媒体查询是否与浏览器的当前状态匹配。
matchMedia
matchMedia接受一个媒体查询字符串，并返回一个MediaQueryList可用于检查浏览器当前状态是否与给定媒体查询匹配的结果。
const mediaQueryList = window.matchMedia("only screen and (max-width: 600px)");
if (mediaQueryList.matches) {
console.log("Matches");
} else {
console.log("Does not match");
}
跟踪变化
我们可以通过监听变化事件来跟踪这些变化。
const callback = (event) => {
if (event.matches) {
console.log("Matches");
} else {
console.log("Does not match");
}
}
mediaQueryList.addEventListener("change", callback);
mediaQueryList.removeEventListener("change", callback);
如果您需要支持旧版浏览器，您可以分别使用 ` --version`addListener和 ` removeListener--version`，但请记住这些方法已被弃用。
mediaQueryList.addListener(callback);
mediaQueryList.removeListener(callback);
useMediaQuery
这项技术还可以移植到可复用的 React Hook 中。该 Hook 将接收一个媒体查询和一个回调函数，用于在发生更改时进行响应。
const useMediaQuery = (query, callback) => {
const [isMatchingQuery, setIsMatchingQuery] = useState(false);
useEffect(() => {
const mediaQueryList = window.matchMedia(query);
const onMediaQueryUpdate = (e) => {
setIsMatching(e.matches);
if(callback) {
callback(e);
}
};
// Set whether the browser initially matches the query
setIsMatchingQuery(mediaQueryList.matches);
mediaQueryList.addEventListener("change", onMediaQueryUpdate);
return () => {
mediaQueryList.removeEventListener("change", onMediaQueryUpdate);
}
}, [query, callback, setIsMatchingQuery]);
return { isMatchingQuery };
}
如果你已经matchMedia在项目中使用它，你是如何使用的？如果你使用的是其他框架，你会如何将其集成matchMedia到该框架中？