react项目中不同宽度断点处理

sxliu414 / 2024-08-08 / 原文

当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;