CSS媒体查询中visibility属性仅单向生效的问题求助

问题根源 #

你的问题出在CSS代码顺序与优先级上：当选择器优先级相同时，后声明的CSS规则会覆盖先声明的。你当前把媒体查询写在了常规样式前面，所以不管媒体查询里设置什么，后面的.navbar-mobile-container { visibility: visible; }都会覆盖它，导致反向设置失效。

修复方案 #

调整代码顺序，把媒体查询移到常规样式之后，同时修改对应的visibility值，实现「小屏幕可见、常规尺寸隐藏」的需求：

/* 常规大屏尺寸：默认隐藏导航栏 */
.navbar-mobile-container {
  visibility: hidden;
  z-index: 10;
  position: fixed;
  bottom: 0%;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  background-color: #04AA6D;
}

.navbar-mobile-container>button>img {
  transform: scale(1.5);
}

.navbar-mobile-container>button {
  background-color: transparent;
}

/* 小屏幕尺寸（≤1000px）：显示导航栏 */
@media only screen and (max-width: 1000px) {
  .navbar-mobile-container {
    visibility: visible;
  }
}

补充建议 #

如果需要完全移除导航栏占据的空间（而非仅隐藏可见性），可以把visibility换成display：大屏用display: none;，小屏用display: flex;，这更符合移动端导航栏的常见使用场景。

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