演示

useMediaQuery

订阅 max-width 断点。视口窄于断点时返回 true。从 @quan-erp/shared-ui 导入。

签名

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