优先用 flex 实现基础布局，语义清晰、响应友好；仅当明确要求“永远不随页面滚动”时才用 position: fixed，并需预留空间和设置 html, body { height: 100% }。
侧边栏用 position: fixed 还是 flex？选错会导致滚动失效
固定定位（position: fixed）能让侧边栏始终贴在视口边缘，适合需要常驻的导航；但若页面内容高度不足或未处理 overflow，它会遮挡底部内容，且无法随父容器滚动。Flex 布局则依赖父容器（如 display: flex 的 container），侧边栏和主内容自动分配空间，更易控制流式行为，但小屏下需配合媒体查询重排。
实际建议：
- 优先用
flex实现基础布局，语义清晰、响应友好，也避免 z-index 和滚动冲突 - 仅当明确要求“永远不随页面滚动”时才用
position: fixed，此时必须给main区域加margin-left或padding-left预留空间，并设置html, body { height: 100% } - 别混用：同时设
position: fixed和flex子项，浏览器解析行为不一致，Chrome 和 Safari 表现可能不同
@media 断点怎么设才不被手机误判
很多侧边栏在 iPhone 上点开就消失，不是 JS 问题，而是 CSS 媒体查询断点写成了 @media (max-width: 768px)——iPad 也匹配这个条件，导致桌面端平板直接折叠。真正该用的是设备像素比 + 视口宽度双重判断，或者更稳妥的移动优先写法。
推荐做法：
立即学习“前端免费学习笔记（深入）”；
- 用
@media (max-width: 480px)处理小屏折叠（iPhone SE 到 iPhone 13 竖屏均在此范围） - 对中等尺寸（如 iPad 竖屏），单独加一条
@media (min-width: 481px) and (max-width: 1024px)控制侧边栏宽度缩窄，而非完全隐藏 - 避免用
device-width，它已被多数现代浏览器弃用，且受缩放影响大
点击汉堡图标后侧边栏不滑出？检查这三个地方
常见现象是 HTML 结构写了，CSS 动画也加了 transition，但点击没反应。问题往往不在 JS，而在 DOM 结构或 CSS 选择器失效。
快速排查点：
-
input[type="checkbox"]是否被包裹在label外？必须让label的for属性精确匹配 checkbox 的id，否则点击不触发状态切换 - 侧边栏元素是否用了
transform: translateX(-100%)但父容器没设overflow: hidden？没这句，滑出时内容会溢出可见区域 - CSS 中是否写了
.sidebar.active { transform: translateX(0); }，但 JS 里操作的是classList.toggle('show')？类名不一致，样式根本不会生效
无障碍访问常被忽略的两个硬性要求
侧边栏不是“能点开就行”，屏幕阅读器用户依赖语义和焦点管理。缺了这两条，即使视觉效果完美，也算不合格。
必须做：
- 给
nav加aria-label="侧边导航"，不能只靠视觉文字“菜单” - 侧边栏展开后，第一个可聚焦元素（如首项
a）要自动获得焦点，用focus()而非仅靠 tabindex；收起时焦点需回到触发按钮，否则键盘用户会卡在空白处
最后提醒：纯 CSS 实现的侧边栏（比如用 checkbox + label）在 iOS Safari 15.4+ 有 focus 丢失 bug，如果支持老版本 iOS，还是得补一行 JS 来强制 focus。这点容易漏，一上线就被辅助技术用户反馈。
