移动端网站Logo尺寸调整问题：自定义CSS无效求助

AI 小北

2026-7-1

移动端Logo尺寸调整无效的排查与解决

首先你的代码里有个明显错误：max-height: auto 是无效的CSS写法，max-height不支持auto值，要么删掉这个属性，要么换成height: auto来保持Logo的宽高比。

接下来是几个常见的失效原因和对应解决方案：

选择器没命中实际元素：很多WordPress主题里的Logo是<img>标签嵌套在.logo容器里，你的选择器只选中了容器，没作用到图片本身。试试把选择器改成：
```
@media (max-width: 360px) {
    .header-main .logo img {
        max-width: 50%;
        height: auto;
    }
}
```
优先级被主题原有样式覆盖：如果主题自带的Logo样式优先级更高，可以给属性加!important临时提升优先级（非必要时尽量少用，确定原因后再优化）：
```
@media (max-width: 360px) {
    .header-main .logo img {
        max-width: 50% !important;
        height: auto !important;
    }
}
```
媒体查询断点范围过窄：360px的断点只覆盖了小屏手机，大部分移动端设备宽度都超过这个值，试试换成更通用的平板及以下断点：
```
@media (max-width: 768px) {
    .header-main .logo img {
        max-width: 50%;
        height: auto;
    }
}
```
CSS未正确加载：按F12打开浏览器开发者工具，在Elements面板找到Logo元素，查看Styles面板里是否有你添加的自定义CSS规则。如果没看到，检查WP Customize的额外CSS是否保存成功，或者有没有其他语法错误（比如之前的max-height: auto）。