本文详解为何 css 媒体查询下背景图在移动设备上不显示，并提供完整解决方案：核心在于为背景容器设置显式高度（或 min-height），同时修正 grid 布局在垂直方向的响应式行为。

本文详解为何 css 媒体查询下背景图在移动设备上不显示，并提供完整解决方案：核心在于为背景容器设置显式高度（或 min-height），同时修正 grid 布局在垂直方向的响应式行为。

在移动端媒体查询中背景图“消失”，并非路径错误或 background-image 未生效，而是因为 .first 元素在移动视口下高度塌陷为 0——它内部为空（仅注释），且未设置任何尺寸约束，导致即使背景图已加载，也因容器无渲染空间而不可见。

✅ 正确解决步骤

1. 为 .first 设置明确的高度控制

在 @media (max-width: 480px) 中，为 .first 添加 min-height 或 height（推荐 min-height 以兼顾内容扩展）：

@media (max-width: 480px) {
  .first {
    background-image: url('images/image-header-mobile.jpg');
    background-color: hsl(277, 64%, 61%);
    background-blend-mode: multiply;
    min-height: 200px; /* 关键：确保容器有可视高度 */
    background-size: cover;
    background-position: center;
  }
}

? 提示：min-height 比固定 height 更健壮，可防止文字溢出或适配不同屏幕高度；搭配 background-size: cover 和 background-position: center 可保证图像自适应填充且居中裁剪。

2. 修正 Grid 布局的响应式结构

原桌面端 grid-template-columns: 1fr 1fr 在移动端需切换为单列垂直堆叠。但仅修改 grid-template-columns 不足以重置布局流——必须显式定义行轨道，否则 .first 可能仍被压缩：

@media (max-width: 480px) {
  main {
    grid-template-columns: 1fr;      /* 单列主轴 */
    grid-template-rows: auto 1fr;   /* 第一行（.first）自适应高度，第二行（.second）占剩余空间 */
    gap: 1.5em;                     /* 增加区块间距，提升可读性 */
  }
}

⚠️ 注意：避免使用 grid-template-columns: auto（非标准值），应使用 1fr 或 auto（作为轨道尺寸值）；initial 不适用于此属性，标准写法是 grid-template-columns: 1fr。

3. 补充最佳实践（增强鲁棒性）

• 添加 background-repeat: no-repeat 防止平铺干扰；
• 检查图片路径与大小：确保 image-header-mobile.jpg 真实存在，且尺寸适配移动屏（建议宽度 ≥ 375px，高度 ≥ 200px）；
• 启用开发者工具验证：在 Chrome DevTools 中切换设备模拟器，检查 .first 元素是否具有计算后的 height 值及 background-image 是否加载成功（Elements → Styles 面板查看 computed 属性）。

✅ 最终精简版移动端样式（推荐直接替换）

@media (max-width: 480px) {
  body {
    min-height: 100vh;
    padding: 0.5em;
  }
  main {
    width: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    gap: 1.5em;
    margin: 1.5em auto;
  }
  .first {
    min-height: 220px;
    background-image: url('images/image-header-mobile.jpg');
    background-color: hsl(277, 64%, 61%);
    background-blend-mode: multiply;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .second {
    padding: 1.5em;
  }
  h1, p {
    width: auto; /* 移除桌面端固定宽度，让文字自然换行 */
  }
}

通过以上调整，.first 将在移动端获得稳定高度与完整背景渲染，真正实现「一处写图、两端适配」的响应式设计目标。