介绍
@optune/react-media-queryable 是一个针对 React 应用的 npm 包，它提供了对响应式设计的支持。使用该包，你可以根据屏幕分辨率的不同，修改组件的显示方式。它使用了 CSS 媒体查询的 API，可以方便地使用该 API。
安装
npm install @optune/react-media-queryable
使用
1. 引入
在你需要使用的文件中引入：
import MediaQueryable from '@optune/react-media-queryable';
2. 使用
2.1 基本用法
使用 MediaQueryable 组件嵌套子组件，并在组件的 props 中传递条件。
<MediaQueryable minWidth={768}>
<div>屏幕宽度大于 768px 时显示</div>
</MediaQueryable>2.2 监听另外一个元素的变化
在某些情况下，我们需要监听另一个元素的变化，例如一个容器大小的变化。这时，你可以使用 onResize 属性。
<MediaQueryable minWidth={768} onResize={() => console.log('resized')}>
<div>屏幕宽度大于 768px 时显示</div>
</MediaQueryable>2.3 自定义媒体查询
除了 minWidth 和 maxWidth 两个属性外，你也可以使用 mediaQuery 属性来自定义媒体查询语句。
<MediaQueryable mediaQuery="(orientation: portrait)"> <div>横屏时隐藏</div> </MediaQueryable>
2.4 指定默认显示
MediaQueryable 组件原则上只显示匹配到的第一个子元素（满足条件的）。但是如果你不想显示任何元素，可以指定默认显示。
<MediaQueryable minWidth={768} noDefault>
<div>不会显示</div>
</MediaQueryable>示例
下面是一个简单的例子，展示如何在应用中使用 @optune/react-media-queryable：
-- -------------------- ---- -------
------ -------------- ---- --------------------------------
-------- ----- -
------ -
---- ----------------
------- -------------------
--------------- ---------------
-- -------- -----------------
------
----
-----------------
--------------- ---------------
-- -------- -----------------
-------
----
-----------------
---------
------
--------------- ---------------
------------ --- -------------
-----------------
--------------- ---------------
------------ --- ------------
-----------------
-------
------
--
-在上述代码中，我们分别定义了两个组件，一个用于在手机屏幕上展示，一个用于在台式机上展示。在每个组件内，我们设置了一个链接和一些文本内容。根据屏幕尺寸的不同，只有一个组件会被渲染到页面上。
总结
使用 @optune/react-media-queryable 可以很方便地实现响应式设计。我们可以通过对屏幕尺寸的监测，在不同设备上提供不同的用户体验。希望本文对你能够更深入地了解和运用这个 npm 包提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005756881e8991b448ea58a