CSS媒体查询中display:none在375px宽度下不生效问题排查

问题原因 #

1. 媒体查询与link标签的匹配逻辑错误
   大概率是link标签的media属性或CSS内的@media规则写错了范围，比如把移动端的查询写成了max-width:374px，导致375px时没触发隐藏桌面图的样式；也可能是同时在link标签和CSS文件里写了媒体查询，双重过滤后漏匹配了375px的场景。

2. CSS优先级冲突
   如果img#desktop有更高优先级的样式（比如内联style="display:block"、更复杂的选择器样式），mobile.css里的display:none会被覆盖，导致桌面图依然显示。

3. Viewport设置缺失
   没加<meta name="viewport" content="width=device-width, initial-scale=1.0">的话，浏览器会用虚拟渲染宽度（比如移动端默认980px），实际检测的宽度和你看到的设备宽度不匹配，375px的媒体查询逻辑完全失效。

解决办法 #

方法1：修正link标签的媒体查询 #

直接在link标签的media属性里明确匹配范围，CSS文件里只写基础样式：

<!-- 移动端：宽度≤375px时加载 -->
<link rel="stylesheet" href="mobile.css" media="(max-width: 375px)">
<!-- 桌面端：宽度≥376px时加载 -->
<link rel="stylesheet" href="desktop.css" media="(min-width: 376px)">

• mobile.css内容：

img#desktop { display: none; }

• desktop.css内容：

img#mobile { display: none; }

方法2：合并到单一CSS文件（更稳妥） #

避免多文件的加载顺序或匹配问题，把所有逻辑整合到一个CSS里：

/* 默认显示移动端图，隐藏桌面端图 */
img#mobile { display: block; }
img#desktop { display: none; }

/* 宽度≥376px时切换显示状态 */
@media (min-width: 376px) {
  img#mobile { display: none; }
  img#desktop { display: block; }
}

这种方式逻辑清晰，没有边界冲突，还能减少HTTP请求。

方法3：排查优先级冲突 #

检查img#desktop的样式覆盖情况：

• 去掉元素上的内联style属性；
• 提升移动端隐藏样式的选择器优先级，比如写成body img#desktop { display: none; }；
• 临时加!important测试（仅用于排查，不推荐长期使用）：img#desktop { display: none !important; }

方法4：添加Viewport元标签 #

在HTML的<head>里加入：

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

确保浏览器用设备实际宽度来匹配媒体查询。

内容的提问来源于stack exchange，提问作者onyedikachi23