React移动端背景与弹窗显示异常问题求助

问题描述 #

使用ReactJS开发简易名片网站，修改App.css设置背景色后，桌面正常模式显示正常，但切换至Chrome移动端模式时，背景显示异常，弹窗也无法正常打开，未修改项目全局默认配置。相关代码如下：

App.css代码 #

.App {
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  justify-content: center;
  font-family: "Calibri";
  color: #222222;
  background-color: #E8E4E1;
}

AboutMe组件代码 #

const AboutMe = () => {
    function AboutMePicture() {
        return <img src={picture} className="aboutMePicture"/>
    }

    return (
        <div className="aboutMeMain">
            <div className="paragraphTitle">О себе</div>
            <div className="aboutMeBlock">
                <div className="aboutMeLeft">
                    <div className="aboutMeText">
                        ...something text
                    </div>
                    <div className="aboutMeText">
                        ...something text
                    </div>
                    <div className="aboutMeText">
                        ...something text
                    </div>
                    <div className="aboutMeText">
                        ...something text
                    </div>
                </div>
                <div className="aboutMeRight">
                    <AboutMePicture/>
                </div>
            </div>
        </div>
    );
};

export default AboutMe;

AboutMe组件样式 #

.paragraphTitle {
  margin-top: 40px;
  font-size: 36px;
  font-weight: bolder;
}

.aboutMeMain {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column wrap;
    margin-top: 50px;
    width: 55%;
    min-width: 530px;

}

.aboutMeBlock {
    display: flex;
    width: 100%;
    background-color: #b2aba4;
    border-radius: 30px;
    padding: 20px 30px 5px 20px;
    margin-top: 10px;
    box-sizing: border-box;
}

.aboutMePicture {
    width: 200px;
}

.aboutMeLeft {
    margin-right: 20px;
}

.aboutMeRight {
    display: flex;
    justify-content: center;
    align-items: center;
}

.aboutMeText {
    font-size: 18px;
    margin-bottom: 20px;
}

问题原因及解决办法 #

1. 背景显示异常 #

• 原因：.App未设置最小高度，仅靠内容撑开高度，移动端视口高度不足时，背景色无法覆盖整个屏幕；同时justify-content: center会让内容垂直居中，导致上下区域留白。
• 解决：给.App添加min-height: 100vh，并清除默认边距：

.App {
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  justify-content: center;
  font-family: "Calibri";
  color: #222222;
  background-color: #E8E4E1;
  min-height: 100vh; /* 覆盖整个视口高度 */
  margin: 0; /* 清除body默认边距 */
}

2. 移动端布局溢出与弹窗异常 #

• 原因：.aboutMeMain设置了min-width: 530px，移动端视口宽度小于该值时，页面会横向溢出，导致滚动区域异常，可能干扰弹窗的点击或定位逻辑；另外缺少移动端适配的视口标签，导致页面缩放异常。
• 解决：
  • 修改.aboutMeMain的宽度设置，适配移动端：

  .aboutMeMain {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-flow: column wrap;
      margin-top: 50px;
      width: 90%; /* 移动端用百分比宽度 */
      max-width: 530px; /* 限制最大宽度，保持桌面端布局 */
      min-width: unset; /* 移除强制最小宽度 */
  }
  

  • 添加媒体查询，适配移动端布局：

  @media (max-width: 768px) {
    .aboutMeBlock {
      flex-direction: column; /* 移动端垂直排列内容 */
    }
    .aboutMeLeft {
      margin-right: 0;
      margin-bottom: 20px;
    }
    .paragraphTitle {
      font-size: 28px; /* 缩小移动端标题字号 */
    }
  }
  

  • 确保public/index.html中包含正确的视口meta标签：

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  

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