必须用 transform: translatex() 而非 left，因其触发 gpu 硬件加速、仅重绘不重排，避免 ios safari 黄色警告及安卓 webview 卡顿；left 会强制重排，导致跳帧、闪屏，且需依赖父容器定位，兼容性差。
用 transform: translateX() 实现响应式侧边栏抽屉，是目前唯一兼顾性能、兼容性和可维护性的方案；改 left 或 margin-left 会触发重排，在 iOS Safari 和低端安卓 WebView 中卡顿明显，甚至出现“跳帧”或“闪一下才隐藏”的现象。
为什么必须用 transform: translateX() 而不是 left
浏览器对 transform 的硬件加速支持成熟，动画走 GPU 合成层，只触发重绘（repaint），不触发重排（reflow）；而 left 改变的是布局位置，每次变化都强制重新计算文档流，尤其在滚动中叠加动画时极易掉帧。iOS Safari 还会在 DevTools 里对非 transform/opacity 动画标黄警告。
-
translateX(-100%)表示左移一个自身宽度，但前提是侧边栏有明确width（如width: 280px），否则百分比计算可能失准 - 别同时写
left和transform—— 浏览器会按规范合并，行为不可控，容易导致位移偏移或动画中断 - 移动端必须配
position: fixed，用absolute会导致滚动时侧边栏随页面偏移，遮罩失效
如何让抽屉在小屏弹出、大屏常驻
不能靠 JS 切换 class 后再用媒体查询覆盖显示逻辑，否则横竖屏切换时状态错乱；正确做法是用媒体查询直接控制“是否启用抽屉行为”，JS 只在小屏下介入。
- 小屏（
@media (max-width: 767px)）：侧边栏默认transform: translateX(-100%)，position: fixed，遮罩层display: block - 大屏（
@media (min-width: 768px)）：覆盖为transform: none、position: static、width: 280px，并移除所有transition防止误触 - JS 触发前先判断
window.matchMedia('(max-width: 767px)').matches，只在真小屏下执行classList.toggle('sidebar-open') - 大屏下给
body加overflow-x: hidden，避免侧边栏展开后意外出现水平滚动条
遮罩层点击关闭失效的常见原因
不是 JS 逻辑错了，而是 DOM 层级和样式没对齐 —— 点击永远落在层级更高的元素上，根本触发不到遮罩监听。
-
.backdrop必须设position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;，不能用100%（它相对父容器） -
z-index要比侧边栏低一级：比如侧边栏z-index: 1000，遮罩设z-index: 999，这样点击才能优先命中遮罩 - 遮罩层需加
cursor: pointer，某些安卓 WebView 下无此声明会导致点击区域响应迟钝 - 关闭逻辑监听
.backdrop.click，别监听document—— 避免事件冒泡干扰其他交互
移动端手势滑动关闭为什么不能纯 CSS 实现
CSS 没有 touchmove 或距离判断能力，必须用 JS 读取滑动位移并动态设置 transform 值，但动画部分仍应交还 CSS 处理。
- 监听
touchstart记录初始 X 坐标，touchmove时用requestAnimationFrame更新style.transform = translateX(${delta}px) - 松手后判断
Math.abs(delta)是否超过阈值（如 80px），决定是补全关闭还是回弹 -
touchmove中必须立刻event.preventDefault()，否则页面会跟着滚动，干扰手势识别 - 整个过程只改
transform和opacity，禁止操作height、margin或触发重排的属性
真正难的不是写出 translateX(0)，而是确保它在 iOS Safari 的 60fps 下稳定运行、在安卓 WebView 里不闪、在横竖屏切换时不卡在半开状态——这些细节全藏在定位方式、媒体查询粒度、遮罩层级和 touch 事件处理节奏里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
