本文详解如何通过CSS媒体查询修正Divi主题（如使用.et_pb_image_0类）中图片在移动设备上尺寸失效的问题，重点指出常见语法错误（缺失花括号）及响应式最佳实践。

本文详解如何通过css媒体查询修正divi主题（如使用`.et_pb_image_0`类）中图片在移动设备上尺寸失效的问题，重点指出常见语法错误（缺失花括号）及响应式最佳实践。

在WordPress中使用Divi主题时，常遇到图片在手机端显示异常（如溢出屏幕、比例失真或尺寸固定不变）的问题。您尝试通过自定义CSS强制设置移动端图片宽度，但未生效——根本原因往往不是选择器错误，而是CSS语法不完整。

您原写的代码：

@media only screen and (max-width: 767px)
.et_pb_image_0 .et_pb_image_wrap img {
    width: 500px;`
}

存在两个关键问题：

1. 缺少媒体查询的花括号闭合：@media规则必须用 {} 包裹整个样式块，否则浏览器完全忽略该规则；
2. 末尾多了一个反引号（`）：属于明显笔误，会导致CSS解析失败。

✅ 正确写法如下（已验证兼容Divi 4.x+）：

@media only screen and (max-width: 767px) {
  .et_pb_image_0 .et_pb_image_wrap img {
    width: 500px !important;
    height: auto;
    max-width: 100%;
  }
}

⚠️ 注意事项：

• 500px 在小屏设备（如iPhone竖屏仅375px宽）下仍会溢出，强烈建议改用相对单位：width: 100%; max-width: 100%; 更符合响应式设计原则；
• 添加 height: auto 防止图片被拉伸变形；
• 如遇优先级冲突（例如Divi内联样式覆盖），可加 !important（临时方案），但长期应优化选择器特异性或使用Divi自带的“图像模块 → Sizing → Max Width”设置；
• 将上述代码粘贴至 WordPress后台 → 外观 → 自定义 → 额外CSS（或子主题的style.css），保存后清空缓存生效。

? 进阶建议：真正响应式图片应结合srcset与<picture>语义化处理，但针对Divi可视化编辑器快速修复，精准的媒体查询+语义化单位（100%/max-width）才是稳定高效的解决方案。