ReactJS多屏幕适配问题：组件重叠及屏幕尺寸检测咨询

一、组件嵌套/重叠问题排查与修复 #

你当前的媒体查询仅调整了字体大小和行高，无法解决布局层面的组件重叠问题，以下是针对性解决步骤：

• 优化基础容器布局
  确保页面主容器使用自适应宽度，避免固定值导致溢出：

  .app-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px; /* 小屏幕下避免内容贴边 */
  }
  

• 调整Flex/Grid的响应式规则
  针对小屏幕切换Flex排列方向、Grid列数：

  /* 平板及以下屏幕 */
  @media (max-width: 768px) {
    .flex-row-container {
      flex-direction: column;
      gap: 16px; /* 增加组件间距避免堆叠 */
    }
    .grid-layout {
      grid-template-columns: repeat(1, 1fr); /* 从多列改为单列 */
    }
  }
  

• 移除固定尺寸限制
  避免给组件、图片设置固定width/height，改用自适应属性：

  img {
    max-width: 100%;
    height: auto; /* 图片按比例缩放，不溢出容器 */
  }
  .card {
    width: 100%; /* 卡片占满容器宽度 */
    min-height: auto; /* 去掉固定高度，由内容撑开 */
  }
  

• 补充多断点媒体查询
  仅1380px的断点覆盖不全，添加常用断点适配不同设备：

  /* 手机屏幕 */
  @media (max-width: 480px) {
    html, body {
      font-size: 14px;
    }
    .header-nav {
      display: none; /* 隐藏导航，改用汉堡菜单 */
    }
  }
  

• 排查层级重叠问题
  如果是组件层级覆盖，检查z-index属性，确保需要前置的组件层级更高，但避免过度使用z-index导致布局混乱。

二、React中检测屏幕尺寸的方法 #

方法1：通过Resize事件监听实时获取尺寸 #

在组件中使用useState和useEffect监听窗口大小变化：

import { useState, useEffect } from 'react';

function App() {
  const [screenSize, setScreenSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  useEffect(() => {
    const handleResize = () => {
      setScreenSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    };

    window.addEventListener('resize', handleResize);
    // 组件卸载时移除监听
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return (
    <div>
      当前屏幕宽度：{screenSize.width}px
      当前屏幕高度：{screenSize.height}px
    </div>
  );
}

方法2：封装自定义Hook复用逻辑 #

将尺寸检测逻辑封装为Hook，方便在多个组件中使用：

import { useState, useEffect } from 'react';

function useScreenSize() {
  // 服务端渲染时避免window未定义的问题
  const initialSize = typeof window !== 'undefined' 
    ? { width: window.innerWidth, height: window.innerHeight }
    : { width: 0, height: 0 };

  const [screenSize, setScreenSize] = useState(initialSize);

  useEffect(() => {
    if (typeof window === 'undefined') return;

    const handleResize = () => {
      setScreenSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return screenSize;
}

// 使用示例
function ProfileComponent() {
  const { width } = useScreenSize();
  return (
    <div className={width < 768 ? 'mobile-profile' : 'desktop-profile'}>
      {width < 768 ? '移动端个人资料' : '桌面端个人资料'}
    </div>
  );
}

方法3：结合媒体查询检测视图类型 #

通过window.matchMedia直接判断当前是否符合某媒体查询规则：

import { useState, useEffect } from 'react';

function useMediaQuery(query) {
  const [matches, setMatches] = useState(false);

  useEffect(() => {
    const media = window.matchMedia(query);
    // 初始化匹配状态
    setMatches(media.matches);

    const handleChange = () => setMatches(media.matches);
    media.addEventListener('change', handleChange);
    return () => media.removeEventListener('change', handleChange);
  }, [query]);

  return matches;
}

// 使用示例
function Navigation() {
  const isMobile = useMediaQuery('(max-width: 768px)');
  return (
    <div>
      {isMobile ? <MobileNav /> : <DesktopNav />}
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Maram Althobity