移动端电商横幅无法显示问题咨询（附测试站点）

首先，先纠正你代码里的语法错误——这很可能是核心原因之一：

1. 修复CSS语法与逻辑问题 #

你的默认代码存在明显的语法错误（多余的{），会导致浏览器无法正确解析整个样式块：

/* 原错误代码 */
@media (min-width: 767px){.banners-top,.banners-content,.banners-footer{display:block} {.banners-top,.banners-content,.banners-footer{display: none}

正确的默认逻辑应该是：

/* 默认所有屏幕隐藏横幅 */
.banners-top,.banners-content,.banners-footer{display: none;}
/* 767px及以上屏幕显示横幅 */
@media (min-width: 767px){
  .banners-top,.banners-content,.banners-footer{display:block;}
}

而你的自定义代码不仅缺少闭合的}，媒体查询的逻辑也写反了：你要实现的是767px以下屏幕显示横幅，应该用max-width而不是min-width——min-width:200px会让所有宽度≥200px的设备都显示横幅（包括桌面端），这显然不符合你的需求。正确的自定义代码应该是：

@media (max-width: 766px){
  .banners-top,.banners-content,.banners-footer{display:block !important;}
}

（加!important是为了确保覆盖默认的隐藏样式，如果你的选择器优先级足够，也可以不加）

2. 排查样式优先级与覆盖问题 #

即使语法正确，真实移动端可能存在以下情况导致样式不生效：

• 默认样式的选择器权重更高（比如带父元素的body .banners-top，比你单独的.banners-top权重高）
• 默认样式使用了!important强制隐藏，你的自定义样式优先级不够
• 自定义CSS加载顺序在默认CSS之前，被后面的默认样式覆盖

排查方法：用Chrome远程调试连接你的手机，查看元素的Styles面板，确认你的自定义样式是否被加载，以及是否被划掉（表示被其他样式覆盖）。

3. 验证视口(Viewport)设置 #

移动端浏览器如果没有正确的视口设置，会自动缩放页面，导致媒体查询的断点判断错误（比如手机屏幕实际宽度是375px，但浏览器渲染时模拟成768px，此时你的max-width:766px媒体查询不会触发）。

检查页面的<head>标签里是否包含以下代码：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

如果没有，添加后再测试——这是移动端适配的基础配置。

4. 清除移动端浏览器缓存 #

真实移动端浏览器的缓存往往比桌面端更顽固，可能还在加载旧的CSS文件。可以尝试：

• 长按浏览器的刷新按钮，选择“强制刷新”
• 清除浏览器的缓存和历史记录
• 如果支持的话，在自定义CSS的URL后加版本号（比如style.css?v=2），强制浏览器加载新文件

5. 用真实设备远程调试确认 #

最直接的方法是用Chrome的远程调试功能连接你的手机，查看：

• 页面实际渲染的宽度（在DevTools的Device Toolbar里确认）
• 自定义CSS是否成功加载到页面中（查看Sources面板的CSS文件）
• 横幅元素的实际计算样式（Styles面板里的Computed标签，看display属性的最终值）

内容的提问来源于stack exchange，提问作者Patrik 艩tolba