纯css侧边栏需同时满足label精准触发、:checked正确影响元素、媒体查询不覆盖三条件；必须用transform位移、fixed遮罩、min-width断点，并用js补overflow:hidden。
移动端侧边栏菜单用 checkbox + :checked 伪类实现纯 CSS 控制是可行的，但必须配合 transform 动画、正确 DOM 结构和媒体查询断点，否则点击无反应、滑动卡顿、遮罩失效等问题会集中爆发。
为什么不能只靠 input[type="checkbox"] + :checked 就完事
纯 CSS 方案看似简洁，实际依赖三个隐性条件同时成立：label 必须能准确触发 checkbox 状态、:checked 选择器必须能精准影响侧边栏元素、且侧边栏本身不能被媒体查询规则覆盖。常见失败场景包括：
-
label的for属性未匹配 checkbox 的id，或 checkbox 被设为display: none后又没用position: absolute; left: -9999px保可访问性，导致点击无效 - 侧边栏写在 checkbox 后面但不是直接兄弟（如中间隔了
div），~或+选择器就选不到 - 媒体查询里写了
@media (max-width: 768px) { .sidebar { display: none; } }，而:checked ~ .sidebar只改transform，display: none优先级更高，动画直接被压制
transform: translateX() 是唯一推荐的位移方式
别碰 left、margin-left 或 width 动画——它们会触发重排，iOS Safari 和部分安卓 WebView 下极易卡顿甚至跳帧。必须用 transform 配合 position: fixed：
- 侧边栏初始状态：
position: fixed; top: 0; left: 0; width: 280px; transform: translateX(-100%); - 激活时：
input:checked ~ .sidebar { transform: translateX(0); } - 过渡必须显式声明：
transition: transform 0.3s ease, opacity 0.3s ease;，不写transform单独项，只写all容易误触其他属性导致闪屏 - 加
will-change: transform在激活态（即:checked ~ .sidebar规则里），否则某些低版本 WebView 不启用 GPU 加速
遮罩层（overlay）必须用 fixed + 100vw/100vh，不能用 100%
遮罩层点击关闭是核心交互，但 90% 的失败案例都出在尺寸声明上。用 width: 100% 或 height: 100% 会导致它只占父容器大小，而非整个视口，尤其当主内容有滚动时，遮罩会“漏底”。
- 正确写法：
.overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.5); z-index: 999; } - 遮罩必须和侧边栏同级，且放在 checkbox 后面，才能被
:checked ~ .overlay选中 - 别忘了给遮罩加
cursor: pointer，某些安卓 WebView 下无此声明会导致点击区域响应迟钝 - 遮罩的
z-index必须低于侧边栏（如 sidebar 设z-index: 1000，overlay 设z-index: 999），否则点不到
媒体查询必须用 min-width 控制桌面端自动显示
很多人把断点写成 @media (max-width: 768px) 并在里面设 .sidebar { display: none; }，这会让纯 CSS 方案彻底失效——因为 :checked 规则无法覆盖 display: none。正确做法是反向思维：
- 默认所有尺寸下侧边栏都用
transform控制显隐，不设display - 仅在桌面端（如
min-width: 769px）取消位移：@media (min-width: 769px) { .sidebar { transform: translateX(0); } } - 同时给桌面端的遮罩层设
display: none，避免它在大屏下意外显示 - 如果还想让桌面端也能手动收起，就得额外加一个按钮并用 JS 控制 class，纯 CSS 在大屏下无法“反向触发”
最易被忽略的是：小屏下展开侧边栏后，必须给 body 加 overflow: hidden，否则背景内容仍可滚动——这个样式不能靠 :checked 触发，得用 JS 补上，纯 CSS 方案在这里天然有缺口。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
