时间戳

首页 > 解决方案 > CSS display none mobile 和 tablet 显示在同一个查询中

html - CSS display none mobile 和 tablet 显示在同一个查询中

问题描述

我有以下代码/ CSS 我想要做的只是根据屏幕尺寸/设备（手机、平板电脑、台式机）显示一种类型的菜单，但是我的手机和平板电脑总是一起显示。

谁能看到我可能缺少的东西？

.desktop-nav {
  display: none;
}

.tablet-nav {
  display: none;
}

.mobile-nav {
  display: none;
}

@media (min-width:320px) {
  .mobile-nav {
    display: block;
  }
  .desktop-nav {
    display: none;
  }
  .tablet-nav {
    display: none;
  }
}

@media (min-width:480px) {
  .mobile-nav {
    display: block;
  }
  .desktop-nav {
    display: none;
  }
  .tablet-nav {
    display: none;
  }
}

@media (min-width:600px) {
  .tablet-nav {
    display: block;
  }
}

@media (min-width:801px) {
  .tablet-nav {
    display: block;
  }
}

@media (min-width:1025px) {
  .desktop-nav {
    display: block;
  }
  .tablet-nav {
    display: none;
  }
  .mobile-nav {
    display: none;
  }
}

@media (min-width:1281px) {
  .desktop-nav {
    display: block;
  }
  .tablet-nav {
    display: none;
  }
  .mobile-nav {
    display: none;
  }
}
<div class="desktop-nav">
  Desktop
  
</div>
<div class="tablet-nav">
  Tablet
</div>
<div class="mobile-nav">
  Mobile
</div>

标签： htmlcss

解决方案

请改用最大宽度。

这是您的代码用简单的英语所说的内容：

  • 隐藏所有菜单

  • 但是，如果大于 320px，则显示移动菜单按钮

  • 如果它大于 480 像素，则显示平板电脑菜单按钮

  • 之后的那些基本上只会妨碍事情，所以你可以删除它们。

您应该改用一些不同的媒体查询，例如下面代码中使用最大宽度的媒体查询。

我还将它们更改为对这些设备更现实。

/* desktops */
.desktop-nav {
  display: block;
}

.tablet-nav {
  display: none;
}

.mobile-nav {
  display: none;
}

@media (max-width: 1000px) {
  /* tablets */
  .mobile-nav {
    display: none;
  }
  .desktop-nav {
    display: none;
  }
  .tablet-nav {
    display: block;
  }
}

@media (max-width: 600px) {
  /* mobiles */
  .mobile-nav {
    display: block;
  }
  .desktop-nav {
    display: none;
  }
  .tablet-nav {
    display: none;
  }
}
<div class="desktop-nav">
  Desktop
  
</div>
<div class="tablet-nav">
  Tablet
</div>
<div class="mobile-nav">
  Mobile
</div>

推荐阅读