Media Query引发文本挤压问题求助：关于我们区块响应式布局异常

核心问题分析 #

你的问题大概率是未在移动端切换Flex布局方向，或者子元素的宽度/flex属性没重置，导致文本无法占满整屏且排列顺序错误。

修复代码示例 #

HTML结构

<div class="about-section">
  <div class="about-image">
    <img src="your-image.jpg" alt="初创公司介绍">
  </div>
  <div class="about-text">
    <h2>关于我们</h2>
    <p>这里填写初创公司的核心介绍内容，比如团队背景、业务方向等...</p>
  </div>
</div>

CSS样式（包含响应式处理）

/* 桌面端样式：图片与文本并排 */
.about-section {
  display: flex;
  gap: 2rem; /* 控制图片和文本的间距 */
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.about-image, .about-text {
  flex: 1; /* 平分父容器宽度 */
}

.about-image img {
  width: 100%;
  height: auto; /* 保持图片比例，避免拉伸变形 */
  display: block;
}

/* 移动端适配：屏幕宽度≤768px时触发 */
@media (max-width: 768px) {
  .about-section {
    flex-direction: column; /* 切换为垂直排列，文本自动到图片下方 */
    gap: 1.5rem;
  }

  .about-image, .about-text {
    width: 100%; /* 强制占满整屏宽度，避免半屏挤压 */
    flex: none; /* 取消桌面端的flex占比设置 */
  }
}

额外排查点 #

• 检查是否有其他全局CSS（比如float、固定宽度、overflow:hidden）干扰了flex布局，可通过浏览器开发者工具查看元素的样式优先级
• 确认媒体查询的断点数值是否符合你的需求，可根据目标设备调整max-width的值
• 若文本仍被挤压，检查.about-text是否设置了固定高度或overflow属性，需重置为height:auto、overflow:visible

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