ReactJS项目移动端间距异常而桌面端正常的问题排查咨询

问题排查结论 #

你遇到的移动端区块间隙问题核心不是媒体查询导致，问题出在以下几个位置：

• 最核心原因是HeroContainer设置了固定高度height: 2900px。移动端该区块的实际内容高度远小于2900px，未被内容填充的部分就会形成空白，直接表现为当前区块和下方区块之间出现超大间隙，桌面端内容刚好接近2900px所以看不到异常。
• HeroContainer的:before伪类存在语法错误，渐变属性定义后多了逗号且没有闭合，移动端浏览器对这类语法错误的容错逻辑和桌面端不同，可能触发异常的布局渲染，额外增加空白。
• HeroContent使用了绝对定位，本身不占据正常文档流高度，就算内容高度变化也不会撑开父容器，父容器的2900px完全是硬占的布局空间，内容不足的情况下必然会出现空白。
• 补充问题：HeroP2的媒体查询逻辑存在问题，768px宽度下字体反而从默认的18px放大到24px，会额外增加内容高度，虽然不是本次空白问题的核心，但也建议调整。

修复方案 #

1. 把HeroContainer的固定高度替换为自适应高度，比如用min-height: 100vh配合上下padding控制间距，不要写死固定像素高度。
2. 补全:before伪类的渐变属性，删除多余逗号，闭合属性定义。
3. 调整HeroContent的定位逻辑，尽量用正常文档流布局减少高度计算异常。

对应问题代码片段

import styled from 'styled-components';
import { MdKeyboardArrowRight, MdArrowForward } from 'react-icons/md';

export const HeroContainer = styled.div`
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 10px;
  height: 2900px; /* 问题所在：固定高度 */
  position: relative;
  z-index: 1;

  :before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(rgba(0, 0, 0, 0.2)),
        to(rgba(0, 0, 0, 0.2))
      ), /* 问题所在：多余逗号未闭合 */
    
  }
`;

// 其余代码省略

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