如何实现图片与描述的响应式布局：适配桌面与移动端

核心思路 #

利用CSS Grid的媒体查询+行列模板切换，在桌面端设置两列布局（图左文右），移动端切换为单列布局（图上文下），无需调整HTML结构，纯CSS即可完成响应式适配。

完整代码示例 #

HTML结构

<div class="feature-section">
  <img src="your-image-url.jpg" alt="内容描述" class="feature-image">
  <div class="feature-content">
    <h2>标题文本</h2>
    <p>这里是详细描述内容，可包含多行文本、列表等元素。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <button class="cta-btn">了解更多</button>
  </div>
</div>

CSS样式

/* 基础容器样式 */
.feature-section {
  max-width: 1200px;
  margin: 4rem auto;
  padding: 0 1rem;
  /* 启用Grid布局 */
  display: grid;
  /* 移动端默认单列，图上文下 */
  grid-template-columns: 1fr;
  gap: 2rem; /* 图与文的间距 */
  align-items: center; /* 垂直居中对齐（移动端可选） */
}

/* 图片响应式处理 */
.feature-image {
  width: 100%;
  height: auto;
  border-radius: 8px; /* 可选：添加圆角美化 */
}

/* 文本区域基础样式 */
.feature-content {
  line-height: 1.6;
}

.cta-btn {
  margin-top: 1.5rem;
  padding: 0.8rem 1.5rem;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* 桌面端适配（断点可按需调整，如768px/1024px） */
@media (min-width: 768px) {
  .feature-section {
    /* 桌面端设两列，图占1份，文占1.2份（比例可自定义） */
    grid-template-columns: 1fr 1.2fr;
    /* 强制图在第一列、文在第二列，不受HTML顺序影响 */
    grid-template-areas: "image content";
  }

  .feature-image {
    grid-area: image;
  }

  .feature-content {
    grid-area: content;
  }
}

关键细节说明 #

• 断点选择：示例用768px作为分界，可根据设计需求调整为1024px或其他值。
• 列比例调整：grid-template-columns: 1fr 1.2fr让文本区域更宽松，也可改为1fr 1fr实现等宽布局。
• Grid Areas：通过grid-template-areas明确元素位置，即使HTML中图片在文本前，也能保证桌面端图左文右的布局。
• 间距控制：gap属性统一管控图与文的间距，移动端和桌面端自动适配，无需重复设置。

扩展优化 #

• 若需多个交替布局模块（如下一个模块文左图右），只需在桌面端媒体查询中将grid-template-areas改为"content image"即可。
• 给图片添加object-fit: cover属性，搭配固定高度（如height: 400px），可避免图片变形。

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