移动端侧边栏应默认隐藏、点击按钮才显示，采用display: none彻底移出布局流，配合transform: translatex()实现滑入动画，并在激活时给body加overflow: hidden防止透底滚动。
移动端侧边栏默认隐藏，点击按钮才显示——这是最可控、无障碍友好、性能开销最低的方案。别指望 flex 自动收缩撑满空间，那只会让文字挤成一团。
小屏下用 display: none 隐藏侧边栏容器
不是 visibility: hidden，也不是 width: 0，而是彻底移出布局流：
-
display: none不占空间、不触发重排，主内容区能自然撑满 - 断点别写死
768px，改用@media (max-width: 48em)，适配字体缩放和高DPI设备 - 如果侧边栏有折叠按钮，记得同步更新
aria-expanded属性，否则读屏器会“看不见”状态变化
滑入动画必须用 transform + position: fixed
用 left 或 width 动画会触发重排，低端安卓机卡顿明显：
- 初始状态：
position: fixed; top: 0; left: -100%; width: 280px; - 展开时只改：
transform: translateX(100%)，配合transition: transform 0.3s ease - 加
will-change: transform（仅在激活态），否则某些安卓 WebView 不启用 GPU 加速
Flex 布局里主内容不撑满？检查 min-width: 0
很多人写了 flex: 1 却没效果，问题就出在这行被忽略的声明：
- 主内容区必须显式设
min-width: 0，否则它会按内部文字撑开，flex: 1失效 - 侧边栏别同时写
width和flex，CSS 优先按flex算，width只当初始值 - 推荐写法：
flex: 0 0 auto（不伸缩、不收缩），再用媒体查询单独控宽
移动端展开后页面还能滚动？漏了 overflow: hidden
这是上线前最容易被忽略的一环：
- 侧边栏激活时，给
加overflow: hidden，防止背景内容透底滚动 - 侧边栏内部要滚动，得单独设
overflow-y: auto，高度用calc(100vh - 64px)减去顶部导航高度 - 点击遮罩层关闭时，事件监听必须绑在
document上，不能只绑在侧边栏内——否则点空白处无效
真正难的不是写出动画，而是让侧边栏在 iPad 横屏、缩放 150% 的 Chrome、iOS Safari 触摸响应延迟等边缘场景下依然稳定。这些细节堆起来，才是“响应式”不是“看起来像”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
