移动端侧边栏不能用 display: none 隐藏，因其移出渲染树和无障碍树，导致屏幕阅读器不可读、focus() 失效、Tab 键跳过，且无法实现过渡动画；应改用 transform 或 left 位移配合 visibility 控制显隐。
移动端默认隐藏侧边栏是合理选择，但直接用 display: none 会破坏可访问性、中断焦点流，且无法做滑入动画；正确做法是用 transform 或 left 位移 + visibility 控制显隐。
为什么不能只靠 display: none 实现隐藏
它会让元素彻底退出渲染树和无障碍树，屏幕阅读器读不到，focus() 失效，键盘 Tab 也会跳过整个侧边栏。更麻烦的是：后续想加滑动动画时，display 属性无法过渡（transition 不生效）。
- 替代方案必须保留 DOM 结构和语义（比如仍用
<nav>包裹） - 隐藏动作应使用
transform: translateX(-100%)或left: -250px配合visibility: hidden - 确保父容器有
overflow: hidden，防止内容溢出可见区域
@media (max-width: 768px) 下的典型隐藏逻辑
断点设在 768px 是常见选择，但实际要结合设计稿的最小交互宽度定——比如侧边栏宽 240px，那断点至少设为 max-width: 240px + 主内容最小安全宽度，避免窄屏下强制换行或文字挤压。
- 桌面端：侧边栏
position: sticky; top: 0;，外层display: flex - 小屏下：侧边栏设
position: fixed; left: -100vw; top: 0; width: 240px; - 同时给
.sidebar.open类添加left: 0;和z-index: 1000; -
.main-content在小屏下需加margin-left: 0;，否则可能被固定定位的侧边栏遮挡
纯 CSS 切换按钮怎么写（不用 JS）
用隐藏 <input type="checkbox"> + :checked 伪类是最轻量的方案，适合静态页或 SSR 场景。关键在于兄弟选择器的层级关系必须严格匹配。
立即学习“前端免费学习笔记（深入）”；
- HTML 中按钮和侧边栏必须同级，且按钮在前：
<input id="sidebar-toggle" type="checkbox"><label for="sidebar-toggle">☰</label><nav class="sidebar">...</nav> - CSS 写法必须是：
#sidebar-toggle:checked ~ .sidebar { transform: translateX(0); } - 不能写成
#sidebar-toggle:checked + .sidebar，除非<nav>紧跟在<input>后面（无空格/换行/文本节点） - 记得给
.sidebar加transition: transform 0.3s ease;，否则滑动变“瞬移”
容易忽略的 z-index 和滚动穿透问题
移动端侧边栏弹出后，如果背景内容还能滚动，用户会误以为页面卡死；若没设对 z-index，侧边栏可能被顶部导航栏或模态框盖住。
- 侧边栏固定定位时，
z-index至少设为1000，顶部栏设999，主内容保持auto或1 - 弹出时给
body加overflow: hidden，收起时恢复；别只靠position: fixed撑高 body - 如果用了
transform动画，低端 Android 机可能闪屏，加will-change: transform;提前触发 GPU 加速 - 侧边栏内链接点击后，移动端建议自动收起（用 JS 监听
click并移除open类），否则用户得再点一次关闭
