小屏菜单不显示？教你用CSS解决

小屏设备上菜单“消失”并非技术难题，而是因直接使用 display: none 后未通过媒体查询在移动端提供显示机制所致；本文直击痛点，详解如何结合 @media (max-width: 768px) 精准控制菜单隐藏与激活状态，并辅以轻量 JavaScript 实现点击展开的交互逻辑，让响应式导航真正可用、可触、可访问——掌握这一套组合方案，小屏菜单再也不会“隐身”了。

在小屏幕下菜单无法显示，通常是因为使用了 display: none 隐藏了菜单，但没有通过媒体查询（media query）正确地在小屏幕上切换显示状态。解决这个问题的关键是合理使用 CSS 的 @media 查询和 JavaScript（可选）来控制菜单的显示与隐藏。

问题原因：display:none 导致菜单完全隐藏

使用 media 查询控制菜单显示

示例 HTML 结构：

CSS 样式：

/* 默认大屏幕显示完整菜单 */
.menu {
  display: flex;
}
.menu-toggle {
  display: none;
}
/ 小屏幕下隐藏菜单，显示菜单按钮 /
@media (max-width: 768px) {
.menu {
display: none;
flex-direction: column;
width: 100%;
}
.menu.active {
display: flex;
}
.menu-toggle {
display: block;
font-size: 24px;
cursor: pointer;
}
}

配合 JavaScript 切换菜单显示状态

JavaScript 示例：

document.querySelector('.menu-toggle').addEventListener('click', function() {
  document.querySelector('.menu').classList.toggle('active');
});

这样，当用户点击 ☰ 图标时，.menu 元素会切换 active 类，从而触发 CSS 中定义的 display: flex，使菜单在小屏幕上显示出来。

响应式设计建议

• 使用 max-width 媒体查询适配移动设备
• 避免在小屏幕上直接使用 display: none 而不提供显示机制
• 添加视觉反馈，如箭头或动画，提升用户体验
• 测试不同设备尺寸，确保菜单可访问

基本上就这些。关键是让 display: none 在小屏幕上有对应的“逆转”规则，并通过交互手段控制显示状态。不复杂但容易忽略细节。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~