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;