如何使用CSS根据屏幕尺寸移除响应式导航菜单中的指定项？

方法一：纯CSS媒体查询（推荐，简洁高效） #

这是实现此类需求最直接的方式，无需JavaScript，仅通过CSS媒体查询针对不同屏幕尺寸控制元素显示状态。

1. HTML结构：给需要在移动端隐藏的菜单项添加专属类（比如mobile-hidden）

<nav class="main-nav">
  <ul>
    <li>ONE</li>
    <li class="mobile-hidden">TWO</li>
    <li>THREE</li>
    <li>FOUR</li>
    <li class="mobile-hidden">FIVE</li>
  </ul>
</nav>

2. CSS样式：设置默认显示所有菜单项，再通过媒体查询在移动端隐藏目标项

/* 大屏/平板端默认样式（显示所有菜单项） */
.main-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.main-nav li {
  display: inline-block;
  padding: 0.8rem 1.2rem;
  /* 可添加其他导航样式，比如字体、颜色等 */
}

/* 移动端断点（示例为767px及以下，可根据需求调整） */
@media (max-width: 767px) {
  .mobile-hidden {
    display: none !important;
  }
}

方法二：JavaScript控制（适合动态菜单或复杂逻辑场景） #

如果你的导航是动态生成的，或者需要结合其他业务逻辑控制显示，可使用JavaScript监听屏幕尺寸变化：

// 定义移动端断点（可自定义）
const MOBILE_BREAKPOINT = 768;

// 处理菜单显示/隐藏的函数
function toggleMenuItems() {
  const menuItems = document.querySelectorAll('.main-nav li');
  
  menuItems.forEach(item => {
    const itemText = item.textContent.trim();
    const isMobile = window.innerWidth < MOBILE_BREAKPOINT;
    
    if (isMobile && (itemText === 'TWO' || itemText === 'FIVE')) {
      item.style.display = 'none';
    } else {
      item.style.display = 'inline-block';
    }
  });
}

// 页面加载时初始化
window.addEventListener('load', toggleMenuItems);
// 窗口大小改变时实时更新
window.addEventListener('resize', toggleMenuItems);

注意事项 #

• 断点值可根据你的设计需求调整（常见移动端断点有640px、768px等）
• 纯CSS方法性能更优，优先使用；JS方法仅在必要时考虑
• 如果使用框架（如React、Vue），也可结合框架的响应式API实现类似逻辑

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