使用CSS媒体查询无法隐藏元素是什么原因？如何解决？

问题根因 #

• 当前你仅编写了min-width:768px和min-width:1280px两个断点的样式规则，屏幕宽度小于768px的场景没有匹配到任何你写的媒体查询规则，所以small、big类会继承父元素的默认字体大小，无法按预期隐藏。
• 使用font-size:0隐藏文本本身存在兼容问题，部分浏览器下可能还会有残余占位。如果你尝试display: none无效，大概率是CSS权重不足被其他样式覆盖，或是媒体查询的逻辑设置错误。
• 如果之前代码可正常运行突然失效，优先排查近期是否调整了CSS加载顺序、新增了同名类的样式规则，或是修改了HTML结构导致类名不匹配。

修复方案 #

方案1：调整媒体查询逻辑，新增默认隐藏规则

先给small、big类加全局默认隐藏的规则，再在宽度满足1280px以上的时候覆盖为显示样式，逻辑更清晰不容易出问题：

/* 全局默认：所有宽度下先隐藏文字 */
.small, .big {
  display: none;
  color: white;
  font-family: 'Bowlby One', cursive;
}

/* 仅宽度≥1280px时显示文字 */
@media(min-width:1280px) {
  .small {
    display: block;
    font-size: 12px;
  }
  .big {
    display: block;
    font-size: 21px;
    white-space: nowrap;
  }
}

如果你需要在768px到1279px之间设置特殊的显示规则，补充对应断点的样式即可：

@media(min-width:768px) and (max-width:1279px) {
  /* 这里写768-1279px宽度下的样式，需要隐藏就保留display:none，需要显示就设置对应字号即可 */
}

方案2：样式仍不生效时排查以下点

• 给选择器提高权重，比如把.small改成.headerDiscord .small、.big改成.headerDiscord .big，更高权重的规则会优先生效，避免被其他样式覆盖。
• 检查父元素discordRectangle、headerDiscord是否设置了和预期冲突的属性，比如字体颜色和父容器背景色一致导致文字看不见。
• 确认媒体查询的语法没有写错，比如min-width后的冒号、数值和单位之间没有多余空格。

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