当react项目中,你需要通过判断当前屏幕宽度改变,对不同宽度断点进行不同的处理,例如,当屏幕宽度缩小至768px及以下时,需要将某一个属性值改变,或者是当屏幕宽度缩小或者放大到某一宽度时,需要调用某个方法
使用window.matchMedia()
监听媒体查询
import React, { useEffect } from 'react';
function ResponsiveComponent() {
useEffect(() => {
// 定义不同的媒体查询
const smallScreen = window.matchMedia('(max-width: 600px)');
const mediumScreen = window.matchMedia('(min-width: 601px) and (max-width: 992px)');
const largeScreen = window.matchMedia('(min-width: 993px) and (max-width: 1200px)');
const xlScreen = window.matchMedia('(min-width: 1201px) and (max-width: 1536px)');
const xxlScreen = window.matchMedia('(min-width: 1537px)');
// 定义响应不同屏幕大小的方法
const handleSmallScreen = () => {
console.log('Small screen');
// 调用适合小屏幕的方法
};
const handleMediumScreen = () => {
console.log('Medium screen');
// 调用适合中屏幕的方法
};
const handleLargeScreen = () => {
console.log('Large screen');
// 调用适合大屏幕的方法
};
const handleXlScreen = () => {
console.log('XL screen');
// 调用适合XL屏幕的方法
};
const handleXxlScreen = () => {
console.log('XXL screen');
// 调用适合XXL屏幕的方法
};
// 监听变化
smallScreen.addListener(handleSmallScreen);
mediumScreen.addListener(handleMediumScreen);
largeScreen.addListener(handleLargeScreen);
xlScreen.addListener(handleXlScreen);
xxlScreen.addListener(handleXxlScreen);
// 初始调用
smallScreen.matches ? handleSmallScreen() : null;
mediumScreen.matches ? handleMediumScreen() : null;
largeScreen.matches ? handleLargeScreen() : null;
xlScreen.matches ? handleXlScreen() : null;
xxlScreen.matches ? handleXxlScreen() : null;
// 清理
return () => {
smallScreen.removeListener(handleSmallScreen);
mediumScreen.removeListener(handleMediumScreen);
largeScreen.removeListener(handleLargeScreen);
xlScreen.removeListener(handleXlScreen);
xxlScreen.removeListener(handleXxlScreen);
};
}, []);
return (
<div>
{/* 你的内容 */}
</div>
);
}
export default ResponsiveComponent;
注意
useEffect
中的清理函数确保了当组件卸载时,所有的事件监听器都会被移除,避免内存泄漏。- 你可以根据需要调整媒体查询的断点值,以匹配你的设计或Tailwind CSS的断点设置。
- 这种方式不仅限于调用
console.log
,你可以在其中执行任何你需要的JavaScript代码,比如更新状态、发送数据到服务器等。