移动端侧边栏应默认显示、小屏用 max-width: 768px 媒体查询设 display: none 隐藏，并配合 aria-hidden=”true” 保障可访问性；交互需 JS 切换类名，避免内联样式覆盖媒体查询。
移动端用 @media 切换侧边栏显示状态
核心思路是默认显示侧边栏，然后在小屏幕下用媒体查询覆盖为隐藏。别反过来写「默认隐藏、大屏显示」，否则首屏加载时可能闪一下空白。
常见错误是只写 display: none，但没考虑可访问性——屏幕阅读器仍会读取被 display: none 隐藏的内容，如果侧边栏含导航链接，建议同时加 aria-hidden="true" 属性。
- 推荐断点用
max-width: 768px（兼容多数平板横屏和手机竖屏） - 若侧边栏有固定宽度（如
width: 240px），隐藏时记得也重置flex或grid相关布局属性，避免留白 - 使用
visibility: hidden虽然保留占位，但不适合侧边栏——它会让主内容区域变窄，体验差
用 display 还是 visibility？选 display
display: none 是最直接的隐藏方式，DOM 元素完全不参与渲染流，主内容能自然撑满全宽；visibility: hidden 只是视觉隐藏，元素还在文档流里占位置，会导致主区域宽度被压缩。
如果侧边栏用了 position: fixed 或 absolute，隐藏时也要注意是否影响滚动行为——比如固定定位的侧边栏隐藏后，页面滚动条可能突然消失又出现，造成抖动。
立即学习“前端免费学习笔记（深入）”；
- 优先用
display: none+display: block控制显隐 - 避免在动画中频繁切换
display（它不可过渡），如需淡出效果，先用opacity和transition，再用display收尾 - 不要对
display: none的元素设置height、overflow等无效属性，CSS 解析器会忽略，但徒增维护成本
配合汉堡菜单按钮实现可切换显示
纯媒体查询只能做「静态隐藏」，用户无法手动唤出侧边栏。真要交互，得加 JS 控制类名，再配合 CSS。
关键点在于：媒体查询负责「默认状态」，JS 负责「用户触发状态」，两者不冲突。例如，移动端默认隐藏，但点击按钮后给侧边栏加 is-open 类，再用 .sidebar.is-open { display: block; } 显示。
- 按钮需加
aria-expanded="false"，点击后同步更新该属性值 - 侧边栏容器加
role="dialog"或role="navigation"，提升语义化 - JS 中用
classList.toggle()切换类名，别直接操作style.display，否则媒体查询规则可能被内联样式覆盖
.sidebar {
width: 240px;
}
@media (max-width: 768px) {
.sidebar {
display: none;
}
.main-content {
width: 100%;
}
}
.sidebar.is-open {
display: block !important;
}
侧边栏在移动端是否真正「消失」，取决于你是否在所有相关选择器中都覆盖了显示逻辑。漏掉一个 .sidebar.active 或 .sidebar--mobile 类，就可能让隐藏失效。