签名
useMediaQuery(breakpoint) — 默认 768(Tailwind md)。
- breakpoint — 小于该宽度时为 true
- 常用:640 / 768 / 1024
TSsignature
function useMediaQuery(breakpoint?: number): boolean;
// default breakpoint = 768用法
在需要不同组件或行为(不仅是布局)时使用。
TSXlayout
1import { useMediaQuery } from "@quan-erp/shared-ui";
2
3export function ProductToolbar() {
4 const isMobile = useMediaQuery(768);
5
6 if (isMobile) {
7 return <MobileActionsSheet />;
8 }
9
10 return <DesktopActionBar />;
11}注意
- 仅布局时优先用 CSS 响应式类
- 行为不同时再用此 hook