纯css隐藏侧边栏关键在于checkbox与.sidebar同级前置且共父容器，用transform: translatex()替代left/width动画，媒体查询需解耦移动端控制与桌面端常驻逻辑。
纯 CSS 实现隐藏侧边栏，关键不是“能不能”，而是 checkbox 是否真能控制 transform —— 多数失败案例都卡在 DOM 位置或媒体查询覆盖上。
checkbox 必须和侧边栏同级且前置
兄弟选择器 ~ 只认同级、后续、同一父容器下的元素。把 <input id="sidebar-toggle" type="checkbox"> 放在 <aside class="sidebar"></aside> 前面，且两者必须包裹在同一父元素内（比如 或某个 <div class="layout">），否则 <code>#sidebar-toggle:checked ~ .sidebar 根本不匹配。
- 错误写法：
<div><input></div> <aside></aside>→ 不是同级，~失效 - 正确结构示例：
<input id="sidebar-toggle" type="checkbox"><br><label for="sidebar-toggle">☰</label><br><aside class="sidebar">...</aside>
- 别用
display: none隐藏 checkbox —— 它会脱离渲染流，部分屏幕阅读器无法聚焦；改用position: absolute; opacity: 0; pointer-events: none;
:checked + transform 动画必须避坑 left/margin/width
用 left 或 width 做位移动画会触发重排，在 iOS Safari 和低端安卓 WebView 上明显卡顿。唯一可靠路径是 transform: translateX()，且初始值必须明确基于视口而非父容器。
- 推荐初始状态：
.sidebar { transform: translateX(-100vw); }（不是-100%，避免父容器 padding 干扰） - 激活态：
#sidebar-toggle:checked ~ .sidebar { transform: translateX(0); } - 过渡必须声明在常态规则里：
.sidebar { transition: transform 0.3s ease, opacity 0.2s ease; }，不能只写在:checked规则中 - 加
will-change: transform到激活态规则，强制启用 GPU 加速（尤其对低版本 WebView 有效）
媒体查询断点要和 :checked 逻辑解耦
小屏下靠 checkbox 控制显隐，大屏下直接显示 —— 这两个逻辑不能混在同一个媒体查询块里，否则层叠优先级会让 :checked 被压制。
- 错误写法：
@media (max-width: 768px) {<br> .sidebar { display: none; }<br> #sidebar-toggle:checked ~ .sidebar { display: block; }<br>}→display: none优先级更高，动画失效 - 正确做法：默认设
.sidebar { display: none; }，再用@media (min-width: 769px) { .sidebar { display: block; } }启用桌面端常驻 - 移动端展开逻辑只在窄屏生效：
@media (max-width: 768px) { #sidebar-toggle:checked ~ .sidebar { display: block; transform: translateX(0); } }
遮罩层（overlay）必须可点击且尺寸精准
遮罩不是装饰，它是关闭菜单的关键入口。它必须能响应点击，并且尺寸得覆盖整个视口，否则用户划到底部时会“透出”主内容。
- 尺寸必须用
width: 100vw; height: 100vh;，不是100%（后者按父容器算，滚动时漏底） - 遮罩要和
<input>同级、在其后，才能被#sidebar-toggle:checked ~ .overlay选中 - 遮罩本身应是
<label for="sidebar-toggle"></label>，而非<div> —— 否则点击不会翻转 checkbox 状态 <li>补上 <code>cursor: pointer，某些安卓 WebView 下没这个样式会导致点击延迟或无响应
真正难的不是让侧边栏滑出来，而是它收回去之后焦点没回到汉堡按钮、键盘 Tab 顺序断了、屏幕阅读器读不出状态变化 —— 这些纯 CSS 做不到，aria-expanded 和轻量 JS 是绕不开的补丁。
