移动端侧边栏应默认隐藏，点击按钮显示，通过flex布局与transform滑入实现自适应；需设box-sizing: border-box、flex-shrink: 0，并配合媒体查询分段控制宽度，避免使用left动画和visibility:hidden。
侧边栏在小屏上消失，点击按钮才显示
移动端屏幕窄，直接堆叠侧边栏和主内容会挤压阅读区域。常见做法是让侧边栏默认 display: none，只在中大屏（如 min-width: 768px）下设为 display: block 或 flex。但要注意：别用 visibility: hidden 替代，它仍占文档流，会影响主内容宽度计算。
实际操作时，建议把侧边栏和主内容包裹在同一个 flex 容器里，并给主内容设置 flex: 1。这样在侧边栏隐藏时，主内容能自动撑满；显示时又能按比例分配空间。避免用固定像素宽（如 width: 250px）直接写死侧边栏，否则媒体查询切换时容易错位。
侧边栏从左侧滑入，不遮挡主内容滚动
用 position: fixed + transform: translateX(-100%) 实现滑入效果最稳妥。关键点在于：侧边栏的 z-index 要高于主内容，但低于顶部导航栏（如果有），否则会盖住返回按钮或标题。
常见错误是直接用 left: -250px 动画，这在高DPI屏或缩放页面时可能偏移不准；transform 更可靠。另外，滑出后记得给 body 加 overflow: hidden，防止背景内容还能滚动——这点常被忽略，导致手指划动时页面“透底”。
立即学习“前端免费学习笔记（深入）”；
- 过渡动画统一用
transform和opacity，别碰width或left - 侧边栏内部滚动需单独加
overflow-y: auto，且高度设为100vh减去头部高度（如calc(100vh - 64px)） - 点击遮罩层（
backdrop）关闭时，确保事件监听绑定在document上，而非仅侧边栏内，否则点击空白处无效
Flex布局下侧边栏宽度随视口变化自适应
纯百分比（如 flex: 0 0 20%）在小屏下依然太宽，需配合媒体查询分段控制。比如：max-width: 280px 用于平板，max-width: 220px 用于手机横屏，再小就切到隐藏模式。
盒模型细节决定成败：如果给侧边栏加了 padding 或 border，务必设 box-sizing: border-box，否则 flex-basis 会超出预期。另外，flex-shrink: 0 必须显式声明，否则主内容变窄时，侧边栏可能被压缩变形。
示例关键片段：
.sidebar {
flex: 0 0 240px;
max-width: 240px;
box-sizing: border-box;
}
@media (max-width: 768px) {
.sidebar {
flex: 0 0 220px;
max-width: 220px;
}
}
@media (max-width: 480px) {
.sidebar {
display: none;
}
}触摸设备上侧边栏拖拽关闭失效
纯 CSS 无法实现拖拽，必须配合 JS 监听 touchstart/touchmove。但 CSS 层面要提前做好准备：侧边栏容器需设 touch-action: pan-x，否则 iOS Safari 会拦截横向滑动手势，直接触发页面回退。
另一个坑是 will-change: transform 的滥用。只在动画触发时动态添加该属性（比如 class 切换时），不要一开始就写死在样式里，否则某些安卓 WebView 会出现渲染闪烁或卡顿。
最后提醒：侧边栏若含表单控件（如 input、select），在 iOS 上弹出软键盘时，viewport 高度变化会导致侧边栏位置错乱。此时需监听 resize 事件，手动重置 transform 值，而不是依赖 CSS 自动响应。
