跳转到主要内容

视口数据

命名空间:core/viewport。

选择器

isViewportMatch

如果视口匹配给定的查询则返回 true,否则返回 false。

用法

import { store as viewportStore } from '@wordpress/viewport';
import { useSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
const ExampleComponent = () => {
	const isMobile = useSelect(
		( select ) => select( viewportStore ).isViewportMatch( '< small' ),
		[]
	);

	return isMobile ? (
		<div>{ __( 'Mobile' ) }</div>
	) : (
		<div>{ __( 'Not Mobile' ) }</div>
	);
};

参数

  • state Object: 视口状态对象。
  • query string: 查询字符串。包含运算符和断点名称,以空格分隔。运算符默认为 >=。

返回值

  • boolean: 视口是否匹配查询。

操作

此包中的操作不应直接使用。

暂无内容。