移动端适配技术求助：段落缩小、iPad图文居中及图文叠放实现

以下是针对你三个布局需求的完整实现代码及说明：

修改后的完整代码 #

HTML（调整结构，增加布局容器） #

<section id="ABOUT">
  <div class="about-container">
    <div class="about-left-col1">
      <img src="Image/project21.png" alt="Cap Lid Project">
    </div>
    <div class="about-right-col1">
      <div class="about-text1">
        <h4>THE CAP LID</h4>
        <p>Let me tell you this,<br>
          I learnt how to use the 3D printer at my school lab and bring my 3D prototype of the cap to life.</p>
        <a href="#" class="button"> JOIN NOW </a>
      </div>
      <h3>#Oct2022 #ProblemSolving #FromScratchtoEnd <br> #3Dmodeling #3Dprinting #DesignThinking</h3>
    </div>
  </div>
</section>

CSS（包含基础布局+多断点适配） #

/* 基础桌面端布局 */
.about-container {
  display: flex;
  align-items: center;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.about-left-col1 img {
  max-width: 100%;
  height: auto;
}

.about-text1 {
  width: 100%;
  max-width: 600px;
}

/* 手机端适配（max-width:700px） */
@media(max-width: 700px) {
  .about-container {
    flex-direction: column-reverse; /* 段落置于图片上方 */
    text-align: center;
  }

  .about-text1 {
    width: 90%; /* 段落适配小屏幕宽度 */
    margin: 0 auto;
  }

  .about-left-col1 img {
    width: 100%;
    max-width: 350px;
    margin: 20px 0;
  }
}

/* iPad适配（分辨率820x1180） */
@media(min-width: 701px) and (max-width: 820px) {
  .about-container {
    flex-direction: column-reverse; /* 可选：保持段落在上，如需左右排列可删除此行 */
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
  }

  .about-left-col1 img {
    margin: 20px auto;
    display: block;
  }

  .about-text1 {
    width: 90%;
    margin: 0 auto;
  }
}

需求实现细节说明 #

1. 段落尺寸适配小屏幕 #

• 手机端媒体查询中，给.about-text1设置width:90%+margin:0 auto，既限制段落宽度避免过宽，又保证居中不贴边；
• 基础样式中给段落设置max-width:600px，兼顾桌面端可读性；
• 图片设置max-width:100%+height:auto，确保在小屏幕下自动缩放不溢出容器。

2. iPad（820x1180）下图片与段落居中 #

• 新增701px~820px区间的媒体查询，精准覆盖iPad分辨率；
• 布局容器.about-container设置max-width:820px+margin:0 auto，让整体布局居中；
• 图片通过display:block+margin:20px auto实现水平居中，段落同样用width:90%+margin:0 auto对齐；
• 如需iPad端保持图片与段落左右排列，删除该断点下的flex-direction:column-reverse即可。

3. 段落置于图片上方 #

• 在手机端和iPad端的媒体查询中，给.about-container设置flex-direction:column-reverse，利用Flex布局的方向反转，让原本在右侧的段落区域显示在图片上方；
• 桌面端默认使用flex-direction:row，保持图片左、段落右的原有布局。

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