CSS侧边栏如何在移动端自动隐藏

最可靠的方式是用@media (max-width: 768px)配合display: none——不占布局、不触发重排、无障碍友好且兼容性好；visibility: hidden和opacity: 0仍占流、可交互、需额外处理可访问性。

移动端侧边栏自动隐藏，最可靠的方式就是用 @media (max-width: 768px) 配合 display: none —— 它不占布局、不触发重排、无障碍友好，且浏览器兼容性拉满。

为什么不用 visibility: hidden 或 opacity: 0

这两者都还在文档流里：visibility: hidden 仍占空间，主内容宽度算不准；opacity: 0 虽然透明，但默认仍可点击（除非手动加 pointer-events: none），而且动画过程中可能被误触。更关键的是，它们都不阻止屏幕阅读器读取内容，若侧边栏含导航链接，需额外补 aria-hidden="true"，徒增维护成本。

@media 断点怎么写才不翻车

直接用 max-width: 768px 就够了，别纠结 iPhone 具体像素或 orientation。注意三点：

1. 媒体查询必须放在常规样式之后，否则会被覆盖
2. 选择器权重要够，比如用 .sidebar.mobile-hidden 比单个 .sidebar 更稳
3. 如果侧边栏是 Vue/React 动态渲染的，CSS 隐藏可能被组件内 v-show 或 hidden 属性抵消，优先改组件逻辑

隐藏后主内容怎么自适应撑满

别靠 width: 100% 硬撑，用 Flex 布局最省心：

1. 把侧边栏和主内容包进同一个 display: flex 容器
2. 给主内容设 flex: 1（等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0）
3. 侧边栏加 flex-shrink: 0，防止它被压缩变形
4. 务必设 box-sizing: border-box，否则 padding/border 会撑出预期宽度

真正容易被忽略的是：如果侧边栏里嵌了地图、视频或 iframe，display: none 会让它们暂停加载和脚本执行——这通常是优点，但若你依赖其预加载行为，就得换方案，比如用 position: absolute; left: -9999px 移出视口，再配 aria-hidden="true"。