响应式布局下使用媒体查询隐藏图片不生效该如何解决

问题原因 #

• ID重复：HTML规范要求同一页面内id属性唯一，你同时给外层div和内层img设置了id="content-desktop"，会导致CSS选择器匹配逻辑异常。
• 阈值不匹配：需求为窗口宽度小于780px时隐藏，当前媒体查询设置的是max-width: 768px，769px~779px区间无法触发隐藏规则。
• 样式优先级/顺序问题：若使用了CSS Modules、样式作用域隔离，或媒体查询写在默认显示样式之前，都会导致规则被覆盖无法生效。

解决方法 #

1. 移除img标签上重复的id="content-desktop"，保证对应选择器匹配目标唯一，更推荐改用类选择器避免ID的全局冲突问题。
2. 调整媒体查询阈值为max-width: 779px（max-width包含当前设置值，小于780px对应的触发阈值就是779px）。
3. 保证媒体查询规则写在对应默认显示样式的下方，优先级更高才能正常生效。

修正后代码示例 #

HTML部分

<div className="d-flex justify-content-end mr-5 pr-2 content-desktop" style={{position:'relative'}}>
    <img src="/images/bars2.png" style={{
        backgroundPosition:'center',
        backgroundSize:'contain',
        aspectRatio:'0.9',
        display:'flex',
        flexGrow:'1',
        position:'relative',
        maxWidth:'23%',
        marginTop:"-23%"
    }} />
</div>

CSS部分

/* 桌面端默认显示规则 */
.content-desktop {
  display: flex;
}
@media screen and (max-width: 779px) {
  .content-desktop {
    display: none;
  }
  .content-mobile {
    display: block;
  }
}

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