纯CSS抽屉方案因避免闪动、支持可访问性而优于JS控制，但仅支持单次切换；需正确标记label、合理定位input、用transform替代left实现流畅动画，并通过媒体查询适配响应式，同时注意遮罩层事件捕获与焦点管理。
为什么用 checkbox 而不用 JavaScript 控制显隐
因为纯 CSS 方案能避免首次渲染闪动、不依赖 JS 执行时机，且天然支持键盘焦点和屏幕阅读器（checkbox 是语义化可访问控件）。但要注意：它只能做“单次触发”切换，无法监听状态变化或联动其他逻辑。
常见错误是把 label 写错位置导致点击无效——label 必须包裹 input[type="checkbox"]，或通过 for 属性绑定 id；否则点击不触发勾选，抽屉就不会动。
-
input必须放在 DOM 中靠前位置（通常在侧边栏之前），否则:checked ~ .sidebar选择器会失效 - 不要给
input设display: none，而要用position: absolute; left: -9999px，否则部分屏幕阅读器会忽略它 - 移动端 Safari 对
:checked + .sidebar这类相邻选择器有渲染延迟，建议加will-change: transform提前提示合成层
transform: translateX() 比 left 或 margin-left 更适合抽屉动画
用 transform 触发 GPU 加速，动画更顺滑，尤其在低端安卓机上差异明显。而 left 或 margin 会触发重排（reflow），卡顿感强。
关键细节：抽屉默认应设 transform: translateX(-100%)（完全左移自身宽度），而不是 -100vw——因为 vw 是视口宽，当页面有垂直滚动条时，100vw 会略大于容器实际宽度，导致抽屉露边。
立即学习“前端免费学习笔记（深入）”；
- 侧边栏宽度建议用固定值（如
width: 280px）配合transform: translateX(-280px)，避免响应式计算误差 - 动画需同时加在
.sidebar和遮罩层（.overlay）上，否则点击遮罩关闭时会出现“抽屉已关但遮罩还在”的视觉错位 - 过渡时间统一用
transition: transform 0.3s ease, opacity 0.3s ease，别漏掉opacity，否则遮罩淡入淡出会断层
如何让抽屉在小屏展开、大屏常驻
核心是用媒体查询覆盖 checkbox 的控制逻辑：在大屏下直接取消 :checked 对抽屉位置的影响，让它始终显示。
错误做法是只改 display ——这会破坏动画连贯性。正确方式是保留 transform，但在 @media (min-width: 768px) 里重置为 transform: translateX(0)，并禁用过渡：transition: none。
- 遮罩层（
.overlay）在大屏下必须设display: none，否则会盖住主内容 - 按钮（触发抽屉的汉堡图标）在大屏下应隐藏：
@media (min-width: 768px) { .hamburger { display: none; } } - 如果侧边栏含导航链接，大屏下建议用
flex布局横向排列，而非维持竖排——这是体验分水岭，不是纯技术问题
移动端点击遮罩关闭抽屉时，为什么有时不生效
本质是事件穿透：遮罩层（.overlay）没真正捕获点击，而是透传给了下面的内容。常见原因是 .overlay 缺少 position: fixed 或 z-index 不够高。
另一个隐蔽问题是 iOS Safari 的“点击延迟”导致快速双击时 checkbox 状态混乱——解决方案是在 input 上加 onclick="this.checked = !this.checked"（仅作兜底，不替代 CSS 逻辑）。
-
.overlay必须设top: 0; left: 0; width: 100%; height: 100%; position: fixed;，且z-index高于侧边栏（如侧边栏是z-index: 100，遮罩至少101） - 遮罩背景用
background: rgba(0,0,0,0.5)，别用background-color单独设透明度，否则部分安卓 WebView 不兼容 - 真机测试时，务必检查横屏切换后抽屉是否仍能正确收起——有些机型 resize 事件不触发 CSS 重绘，需监听
window.orientation做补偿
change 事件补足。否则对键盘用户不友好。 
