小屏幕下侧边栏应使用媒体查询配合 display: none 彻底隐藏，推荐断点 max-width: 768px；需确保 viewport 标签存在、主内容区宽度自适应，并手动清理侧边栏内定时器等资源。
侧边栏在小屏幕上直接隐藏，用 display: none 最简单
小屏设备（比如手机）上留着侧边栏不仅浪费空间，还会挤压主内容，用户得左右滑动才能阅读。最直接的解决方式就是用媒体查询配合 display: none 把它“拿掉”。注意：这里不是视觉隐藏（如 visibility: hidden），而是彻底从渲染树中移除，不占布局空间，也不影响焦点和可访问性。
- 推荐断点设为
max-width: 768px（常见平板竖屏上限），避免在 iPhone 等窄屏上还显示 - 确保侧边栏有明确的 class，比如
sidebar，否则选择器容易误杀其他元素 - 如果侧边栏里有定时器、WebSocket 或监听器，
display: none不会自动销毁它们——需要手动清理，否则可能内存泄漏
为什么不用 visibility: hidden 或 opacity: 0
这两个属性只是让元素“看不见”，但依然占据文档流位置，主内容区域宽度不会自动撑满。更麻烦的是，opacity: 0 的元素仍能响应点击、聚焦，可能引发意外交互；而 visibility: hidden 虽然不响应点击，但键盘焦点仍可进入（尤其对屏幕阅读器不友好）。
-
display: none是唯一能让浏览器真正“忽略”该元素布局与交互的方式 - 若需过渡动画（比如淡出+收缩），不能直接对
display做 transition（它不支持动画），得先用opacity和max-height过渡，再用display: none在动画结束后设为最终状态
媒体查询要写在常规样式之后，否则可能被覆盖
CSS 层叠顺序很重要。如果你把媒体查询写在前面，而后面又定义了 .sidebar { display: block } 这类通用规则，小屏下侧边栏反而会重新出现。
- 把所有响应式规则统一放在 CSS 文件末尾，或单独建
responsive.css并放在主样式表之后引入 - 检查浏览器开发者工具的“Computed”面板，确认生效的
display值确实是none，而不是被其他选择器权重更高的规则覆盖 - 避免用
!important强行覆盖——它会让后续维护变困难，尤其多人协作时
移动端需要补上 viewport meta 标签
没有这行 HTML，很多移动浏览器会以桌面视口宽度（通常是 980px）渲染页面，导致媒体查询的 max-width: 768px 完全不触发。
<meta name="viewport" content="width=device-width, initial-scale=1">
- 漏掉这个标签是线上环境侧边栏“死活不消失”的最常见原因
- 如果项目用 Vue/React 等框架，确保它被写在
public/index.html或根模板的中，而不是组件内
width: 100%，页面中间可能留白。这点很容易被忽略。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
