新手：您可以使用 CSS 修改以响应式屏幕尺寸显示的导航项吗？

Question

我希望根据屏幕尺寸删除网站导航中的项目。我见过的所有搜索都与大小/填充/等有关。

全尺寸和平板电脑菜单

• 一个
• 两个
• 三
• 四个
• 五

移动菜单

• 一个
• 三
• 四个

到目前为止，我一直在尽我所能研究响应式菜单。除了颜色、边距、填充、边框等物理修改之外，我还没有发现任何东西。

Answer 1

如果没有更多参考资料或代码片段，很难理解这个问题。据我所知，您正在尝试通过有选择地显示或隐藏某些菜单项来根据屏幕尺寸修改网站的导航菜单。

您可以使用 CSS 甚至 JavaScript 来完成此操作。您可以通过在 HTML 代码中构造导航菜单来实现此目的。您可以使用不同的类或 ID 来识别要根据屏幕尺寸显示或隐藏的菜单项。

例如在 HTML 中：

<nav>
  <ul class="full-size-menu">
    <li>ONE</li>
    <li>TWO</li>
    <li>THREE</li>
    <li>FOUR</li>
    <li>FIVE</li>
  </ul>
  <ul class="mobile-menu">
    <li>ONE</li>
    <li>THREE</li>
    <li>FOUR</li>
  </ul>
</nav>

在 CSS 中：

/* Styles for full-size screens and tablets */
@media screen and (min-width: 767px) {
  .mobile-menu {
    display: none; /* Hide the mobile menu */
  }
}
    
/* Styles for mobile screens */
@media screen and (max-width: 767px) {
  .full-size-menu {
    display: none; /* Hide the full-size menu */
  }
}