在大屏设备上隐藏手机端导航菜单需用css媒体查询控制显示状态：1.为移动端导航添加唯一类名（如.mobile-nav）；2.默认设display: none，仅在max-width: 767px下display: block；3.大屏下显式显示.desktop-nav并保持.mobile-nav隐藏；4.断点需匹配设备实际宽度，常用768px为大屏起始点。

在大屏设备上隐藏手机端导航菜单，核心是用 CSS 媒体查询配合合适的类名控制显示状态。通常手机导航菜单（如汉堡按钮触发的侧边栏或下拉菜单）默认只在小屏显示，大屏下应设为 display: none 或 visibility: hidden，同时确保主导航正常显示。

1. 给手机导航菜单添加明确的类名

确保你的移动端导航结构有清晰、唯一的类名，例如：

  

    
• 首页

    
• 关于

  

2. 默认隐藏手机导航，仅在小屏激活

推荐“移动优先”写法：先设手机菜单为隐藏，再用媒体查询在小屏（如 max-width: 767px）中显示它：

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

.mobile-nav {
  display: none;
}

@media screen and (max-width: 767px) {
  .mobile-nav {
    display: block;
  }
}

3. 大屏下确保主导航可见（可选但建议）

如果页面同时存在桌面主导航（如 .desktop-nav），可在大屏下显式显示它，并保持手机菜单隐藏：

.desktop-nav {
  display: none;
}

@media screen and (min-width: 768px) {
  .desktop-nav {
    display: flex;
  }
  .mobile-nav {
    display: none;
  }
}

4. 注意响应断点与设备实际宽度匹配

常用断点参考：

• max-width: 480px：老式手机
• max-width: 767px：多数手机竖屏（含 iPhone X/XS 等）
• min-width: 768px：平板横屏及以上（常见大屏起始点）
• 如需更精细控制，可用 min-width: 1024px 针对桌面设备

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！