最稳方案是用@media控制显示逻辑、transform:translateX()实现位移动画：侧边栏设position:fixed;top:0;height:100vh;默认transform:translateX(-100vw)，激活时translateX(0)，配transition:transform 0.3s cubic-bezier(.25,.46,.45,.94)。
用 @media 控制显示逻辑，用 transform: translateX() 做位移动画，是目前最稳定、性能最好、兼容性够用的响应式侧边菜单方案。别碰 left、width 或 visibility 动画——它们要么触发重排，要么占文档流，要么在高DPI屏上偏移不准。
移动端默认隐藏 + 点击按钮滑入，怎么写 CSS？
核心是固定定位 + transform 位移 + 过渡控制。不要用 display: none 切换，它无法过渡；也不要只靠 visibility: hidden，它仍占空间，主内容宽度会被压缩。
-
.sidebar必须设position: fixed; top: 0; height: 100vh;，且z-index高于主内容但低于顶部导航栏（如有） - 默认状态用
transform: translateX(-100vw)（注意是vw，不是%），确保彻底移出视口，避免右边露缝 - 打开状态用
transform: translateX(0)，配合transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) - 必须加
box-sizing: border-box，否则 padding/border 会让实际宽度超出预期，位移错位 - 遮罩层
.overlay要设position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.5); z-index: 999;，点击它关闭菜单时，事件监听得绑在document上，不能只绑在侧边栏内
为什么 translateX(-100%) 有时没完全隐藏？
根本原因在于计算基准不一致：% 是相对于父容器宽度，而父容器可能有 padding、border，或字体渲染导致子元素实际宽度略大于声明值（尤其含 emoji 或中日韩字符时）。translateX(-100vw) 才真正以视口为单位，更可靠。
- 调试时临时加
outline: 1px solid red看真实边界 - 如果侧边栏内部有宽内容（如长文本、未折行链接），加
max-width: 100vw防止撑宽 - 某些安卓 WebView 对
transform渲染有延迟，可加will-change: transform（仅在打开/拖拽中动态加，完事立刻移除）
媒体查询断点怎么设才不踩坑？
别只用一个断点（比如 max-width: 768px）。平板横屏、小屏手机、折叠屏的宽度差异大，硬切容易错位。
- 推荐分段：桌面端保持显示 → 平板（
max-width: 1024px）开始收窄 → 小屏（max-width: 767px）切到隐藏+抽屉模式 - 侧边栏宽度别写死
width: 250px，改用flex-basis或max-width：比如max-width: 280px（平板）、max-width: 220px（手机横屏） - 主内容区必须设
flex: 1（如果用 flex 布局），否则侧边栏隐藏后它不会自动撑满 - 小屏下记得给
body加overflow: hidden（JS 控制开合时动态加/删），否则背景内容还能滚动，“透底”
最容易被忽略的其实是状态同步：用户手势拖拽中切后台再切回来，touchend 永远不触发，菜单卡在半开状态。得监听 visibilitychange 补全关闭逻辑——这点纯 CSS 方案完全做不到，JS 不可省。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
