useMediaQuery

輕鬆使用媒體查詢

Usage

即時編輯器

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

  return <div>螢幕是否寬屏：{isWide ? "是" : "否"}</div>;
};

結果

螢幕是否寬屏：是

API

useMediaQuery

Returns

boolean: 是否符合媒體查詢

Arguments

參數名	描述	類型	預設值
query	媒体查询字符串	string (必填)	-
defaultState	默认值	boolean | undefined	-