纯css移动端侧边栏推拉必须用checkbox，因其:checked伪类可被css直接响应，而button无对应状态伪类；需配合transform实现动画、同级结构选择器及无障碍label包裹。
移动端侧边栏推拉效果不用 JS 也能跑通，但必须用 <input type="checkbox"> 触发，display: none 配合 transition 会失效，得靠 transform 或 max-height。
为什么纯 CSS 推拉必须用 checkbox 而不是 button
浏览器 CSS 无法监听 button 的点击状态，但能响应 input[type="checkbox"] 的 :checked 伪类。这是唯一零 JS、可降级、无障碍友好的触发机制。
-
<input id="sidebar-toggle" type="checkbox">必须放在<aside></aside>前面，且同级，才能用#sidebar-toggle:checked ~ aside选中 - 不能用
div或button模拟 checkbox 状态——CSS 选不到，JS 又绕回去了 - 隐藏的
input不影响语义，屏幕阅读器仍能识别其状态变更
transform: translateX() 是最稳的推拉动画方案
比起 width 或 left，transform 触发硬件加速、不触发重排、动画更顺滑，且兼容 iOS Safari。
- 初始状态：
aside { transform: translateX(-100%); }（完全左移出屏） - 展开时：
#sidebar-toggle:checked ~ aside { transform: translateX(0); } - 必须加
transition: transform 0.3s ease，否则无动画 - 别忘了给
aside设position: fixed和top: 0; height: 100vh，否则位移后布局错乱
移动端内容区要同步右移，避免被遮挡
侧边栏用 position: fixed 后脱离文档流，主内容不会自动让位，必须手动控制。
- 默认状态：
main { margin-left: 0; } - 展开时：
#sidebar-toggle:checked ~ main { margin-left: 240px; }（值需匹配侧边栏宽度） - 更稳妥的做法是把
main包进一个 flex 容器，用transform同步位移，避免 margin 冲突 - 如果用了
overflow-x: hidden在body上，记得在展开时临时放开，否则 iOS 会卡住滚动
容易忽略的可访问性与降级细节
checkbox 方案看似简单，但焦点管理、键盘支持、JS 失效 fallback 这三处一漏，移动端体验就断掉。
- 按钮标签必须用
<label for="sidebar-toggle"></label>包裹图标，否则屏幕阅读器读不出“打开菜单” - 按
Enter或Space键应能触发 checkbox，无需额外 JS - 如果 JS 加载失败，
label仍可点击，但动画可能卡顿——这时确保transform有默认值，不要依赖 JS 补样式 - 别在媒体查询里写
@media (max-width: 768px) { aside { display: block; } }，这会覆盖 checkbox 的:checked控制逻辑
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
