useMediaQuery

实现一个 useMediaQuery Hook，用于订阅并响应媒体查询的变化（例如屏幕大小、分辨率、方向等）。

export default function Component() {
  const isSmallDevice = useMediaQuery('only screen and (max-width: 768px)');

  return <div>{isSmallDevice && <a href="#">Menu</a>}</div>;
}

提示：window.matchMedia API 可能会有所帮助。

参数

query: string：要匹配的媒体查询。它必须是有效的 CSS 媒体查询字符串

返回值

该 Hook 返回一个布尔值，指示媒体查询是否匹配。