useMediaQuery

轻松使用媒体查询

Usage

Live Editor

function Demo() {
  const isWide = useMediaQuery("(min-width: 480px)");

  return <div>屏幕宽度: {isWide ? "宽屏" : "窄屏"}</div>;
};
Result

API

useMediaQuery

Returns

boolean: 是否符合媒体查询

Arguments

参数名描述类型默认值
query媒体查询字符串string (必填)-
defaultState默认值boolean | undefined-