必须用transform: translatex()而非left或margin-left，因其触发gpu加速、不触发重排，动画更流畅；需配合媒体查询、position: fixed/absolute、明确宽度及遮罩层实现真响应式抽屉菜单。
用 transform: translateX() 配合媒体查询和固定定位，是最稳定、不卡顿、真响应式的方案。别碰 max-height 过渡或 left 动画——它们在移动端要么失效，要么掉帧。
为什么必须用 transform: translateX() 而不是 left 或 margin-left
因为 translateX() 触发 GPU 合成层，动画走的是独立线程，不触发重排（Layout），滑动顺滑；left 会强制浏览器每帧都计算布局，尤其在低端安卓机上一拖就卡顿。margin-left 在部分 WebView 中还会导致文档流抖动，页面内容跳。
常见错误现象：transform 写对了但菜单不动，八成是父容器设了 overflow: hidden，或者菜单初始状态用了 display: none（这个值无法过渡）。
- 收起状态写成
transform: translateX(-280px)（推荐用像素值，避免旧 WebView 解析%错乱） - 展开状态为
transform: translateX(0)，配合transition: transform 0.3s ease - 必须加
position: fixed或position: absolute，否则位移会影响主内容流，还可能意外撑出滚动条
如何用纯 CSS 媒体查询实现“小屏抽屉、大屏常驻”
关键不是靠 JS 切换 class，而是用 @media 直接控制不同断点下的行为。否则横竖屏切换时状态错乱，或者桌面端误触后菜单卡在半开状态。
典型结构：一个侧边栏 <aside class="sidebar"></aside> + 一个遮罩层 <div class="overlay"> + 一个触发按钮。<ul>
<li>小屏（<code>max-width: 768px）下：.sidebar 默认 transform: translateX(-280px)，.overlay 默认 display: none
.sidebar--open 类后，.sidebar 变成 transform: translateX(0)，.overlay 变成 display: block
min-width: 769px）下：.sidebar 直接设 transform: translateX(0); width: 280px;，并移除所有切换逻辑body 加 overflow-x: hidden，否则抽屉展开时可能出现水平滚动条移动端点击穿透、遮罩失效、iOS 滚动异常怎么防
这些问题不是 bug，是 CSS 层级和 DOM 行为没对齐的必然结果。
遮罩点击无效？大概率是 .overlay 没占满视口：width: 100vw; height: 100vh; 必须写死，不能用 100%（它相对父容器）；z-index 要比侧边栏低一级（如 sidebar 是 z-index: 1000，overlay 就设 999）。
关闭后还能点到背后按钮？是因为只靠 translateX(-280px) 隐藏，DOM 还在，且没清样式。动画结束后，必须显式重置：transform: '' + display: none（或 visibility: hidden），并加 setTimeout 兜底，防止 transitionend 事件丢失。
- iOS Safari 滚动卡顿：给
.sidebar加backface-visibility: hidden，防止渲染异常 - Android 低版本 WebView 中
translateX(-100%)失效：统一用像素值，比如translateX(-280px) - 微信 7.0.20 以下对
will-change: transform有 bug：降级为transform: translateZ(0.001px)触发合成层
Bootstrap 的 offcanvas 组件容易踩哪些坑
它封装得看似简单，但 DOM 结构要求极严——稍一嵌套就失效。
最常报的错误是控制台出现 Cannot read properties of null，基本等于 document.getElementById('sidebar') 找不到元素，原因通常是：offcanvas 没放在 直接子级，而是塞进了 <main></main> 或 <div class="container"> 里。<ul>
<li>
<code>offcanvas 必须是 的直接子元素，否则遮罩层不显示、点击无响应
offcanvas 和 Bootstrap 栅格（如 col-md-3）混用——col 强制参与 flex 布局，而 offcanvas 依赖 position: fixed 脱离文档流，两者冲突<nav class="d-none d-lg-block"></nav>，移动端用 <div class="offcanvas offcanvas-start d-lg-none">
<li>
<code>.offcanvas-body 必须加 max-height: calc(100vh - 56px); overflow-y: auto;，否则内容超长时遮罩会被拉变形真正难的不是让菜单“滑出来”，而是让它在各种 WebView、横竖屏切换、快速连点、键盘焦点、滚动锁定等真实场景下不崩、不卡、不透、不跳。这些细节藏在 z-index 层级、transform 合成条件、display 清理时机和媒体查询边界里，漏掉一个，用户就会感知到“不专业”。
