本文详解如何通过CSS媒体查询修复Divi主题（如使用 .et_pb_image_0 类）中图片在移动设备上不响应的问题，指出常见语法错误并提供可直接生效的正确写法。
本文详解如何通过css媒体查询修复divi主题（如使用 `.et_pb_image_0` 类）中图片在移动设备上不响应的问题，指出常见语法错误并提供可直接生效的正确写法。
在WordPress中使用Divi主题时，许多用户会发现通过模块添加的图片在桌面端显示正常，但在手机等小屏幕设备上出现溢出、裁剪或尺寸僵化等问题——这本质上是图片未启用响应式行为所致。你尝试修改自定义CSS来强制移动端图片宽度为500px，但未生效，根本原因在于CSS媒体查询语法缺失关键花括号。
原始错误代码：
@media only screen and (max-width: 767px)
.et_pb_image_0 .et_pb_image_wrap img {
width: 500px;`
}
⚠️ 问题解析：
- 缺少媒体查询规则块的起始 {（紧接在 ) 后）；
- 行末多了一个反引号 `（应为英文分号 ;）；
- width: 500px 在移动端反而可能造成横向滚动（因超出视口），违背“响应式”初衷。
✅ 正确写法（推荐且经验证）：
@media only screen and (max-width: 767px) {
.et_pb_image_0 .et_pb_image_wrap img {
width: 100% !important;
height: auto !important;
max-width: 100%;
}
}
? 为什么推荐 width: 100% 而非固定 500px？
- 100% 使图片宽度随容器缩放，适配任意屏幕；
- height: auto 保持原始宽高比，避免拉伸变形；
- max-width: 100% 是响应式图片的黄金准则，防止超大图撑破布局；
- !important 可覆盖Divi内联样式或高优先级CSS（调试阶段建议保留，上线后可结合更具体选择器优化）。
? 操作指引：
- 进入WordPress后台 → 外观 → 自定义 → 额外CSS；
- 粘贴上述修正后的CSS代码；
- 点击「发布」并硬刷新移动端浏览器（清除缓存）验证效果。
? 扩展建议：
若需对特定图片单独控制（如仅调整某张Banner图），可为该模块添加CSS类（如 mobile-full-img），再编写更精准的选择器：
@media (max-width: 767px) {
.mobile-full-img img {
width: 100% !important;
height: auto;
}
}
总结：响应式图片的核心不是“设固定像素”，而是“相对容器弹性伸缩”。修正语法错误只是第一步，理解 width: 100% + max-width: 100% + height: auto 这一组合，才能真正实现跨设备无缝适配。
