小屏幕下侧边栏必须用 display: none 配合媒体查询隐藏，因为 visibility: hidden 和 opacity: 0 仍占文档流、影响布局与可访问性；@media (max-width: 768px) 是稳妥断点，需同步重置主内容区布局并手动清理 JS 资源。
小屏幕下侧边栏必须用 display: none 配合媒体查询隐藏，其他方式（如 visibility: hidden 或 opacity: 0）都会导致主内容区被挤压或产生意外交互。
为什么不能用 visibility: hidden 或 opacity: 0
这两个属性只是“看不见”，但元素仍在文档流中：前者继续占位、影响 flex 宽度计算；后者仍可接收点击和焦点，对键盘导航和屏幕阅读器不友好。更关键的是，它们不会释放空间——主内容区宽度不会自动撑满，用户可能得左右滚动才能读完文字。
而 display: none 是唯一让浏览器真正忽略该元素布局、渲染与事件响应的方式。
@media (max-width: 768px) 是最稳妥的断点
这个值覆盖了绝大多数手机竖屏（iPhone 14 竖屏宽 390px）和部分小平板，比用 992px 或 1231px 更贴近真实手持设备体验。注意以下几点：
立即学习“前端免费学习笔记（深入）”；
- 确保 HTML 中有
<meta name="viewport" content="width=device-width, initial-scale=1">，否则媒体查询在移动端可能不触发 - 给侧边栏加明确 class，比如
sidebar，避免选择器误命中其他元素（如.menu或.nav） - 别只写
@media (max-width: 768px) { .sidebar { display: none; } }就完事——如果主内容区依赖侧边栏存在来计算宽度（例如margin-left: 250px），必须同步重置它的样式
隐藏后主内容区必须重设布局行为
常见错误是只隐藏侧边栏，却不调整主容器的排布逻辑。结果就是空白区域残留，或者内容错位。正确做法取决于你用的布局模型：
如果是 Flex 布局：
.quiz_space { display: flex; flex-direction: row-reverse; }
@media (max-width: 768px) {
.side_menu_container { display: none; }
.quiz_space { flex-direction: column; }
.quiz_space__content { width: 100%; }
}
如果是 Grid 布局：
.layout { display: grid; grid-template-columns: 250px 1fr; }
@media (max-width: 768px) {
.sidebar { display: none; }
.layout { grid-template-columns: 1fr; }
}
关键点：不要只改列宽（如 grid-template-columns: 0 1fr），那会让侧边栏网格项塌陷但仍在渲染树里，可能引发重叠或高度异常。
JS 初始化资源必须手动清理
display: none 不会自动销毁侧边栏里的定时器、IntersectionObserver、WebSocket 连接或地图实例。若不处理，这些资源持续运行，轻则耗电，重则内存泄漏。
推荐在隐藏前触发清理逻辑，例如：
- 监听
window.matchMedia("(max-width: 768px)").matches变化 - 在匹配为
true时调用cleanupSidebar()函数，清空setIntervalID、unobserve所有目标、close()WebSocket - 如果侧边栏由框架（如 React）管理，确保
useEffect的 cleanup 函数在卸载时执行
这点容易被跳过，但线上环境出问题时，往往就卡在这类“看不见”的资源残留上。
