react-media如何使用

介绍

react-media 是 React 中用于响应式设计的一个很好的库。它可以用于在视口宽度满足特定条件时渲染组件。 主要功能包括:

媒体查询:通过 minWidth, maxWidth 和 width 等设置媒体查询条件。 渲染组件:当媒体查询条件匹配时渲染子组件。 默认样式:可以设置默认渲染的组件。当不满足所有媒体查询条件时使用。 监听窗口大小变化:媒体查询条件变化会自动重新渲染组件。

使用

1. 安装依赖：

    使用npm：

   npm install react-media

   使用yarn：

   yarn add react-media

2. 导入和使用：
   导入react-media组件，然后在需要响应式显示内容的地方使用它。

   import React from 'react';
   import Media from 'react-media';
   
   const MyComponent = () => {
     return (
       <div>
         {/* 在大于等于768px的宽度上显示 */}
         <Media query="(min-width: 768px)">
           {matches => matches ? <div>大屏幕显示的内容</div> : null}
         </Media>
   
         {/* 在小于768px的宽度上显示 */}
         <Media query="(max-width: 767px)">
           {matches => matches ? <div>小屏幕显示的内容</div> : null}
         </Media>
       </div>
     );
   };
   
   export default MyComponent;