useMediaQuery

一个用于跟踪 CSS 媒体查询/多个媒体查询状态的 React Hook。

演示

尝试调整窗口大小以查看效果。

源码
isPhoneView:
false
isPadView:
false
isDesktopView:
false
isColorfulDevice:
false
isPortraitPrint:
undefined
isNotPrint:
undefined

用法

请查看 API。

源码

点击下方链接跳转 GitHub 查看源代码。

API

const query = useMediaQuery(queryString, options) const [...queries] = useMediaQuery([...queryStrings], options)

查询字符串 QueryString

一个媒体查询 字符串,或多个媒体查询 字符串 的数组。

选项 Options

AddEventListenerOptionsuseEventListener 的选项,请查看 useEventListener#options 了解更多细节。

export type UseMediaQueryOptions = AddEventListenerOptions & {}

返回值

如果 queryString 是一个 字符串,返回一个 布尔 值,指示媒体查询是否匹配。

如果 queryString 是一个数组,返回一个 布尔 值数组,指示媒体查询是否匹配。

export type UseMediaQueryReturns<T, R> = R extends T[] ? boolean[] : boolean