本文详解如何通过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;`
}
存在两个关键问题：
- 缺少媒体查询的花括号闭合：@media规则必须用 {} 包裹整个样式块，否则浏览器完全忽略该规则；
- 末尾多了一个反引号（`）：属于明显笔误，会导致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与
