useMediaQuery

轻松使用媒体查询

Usage

实时编辑器

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

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

结果

屏幕宽度: 宽屏

API

useMediaQuery

Returns

boolean: 是否符合媒体查询

Arguments

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