右侧导航应根据内容语义选择：导航类用 nav，补充类用 aside；flex 布局中 main 需设 flex: 1，右侧栏推荐 width: 280px；小屏断点用 max-width: 480px，中屏单独处理；避免滥用 position: fixed。
右侧导航用 aside 还是 nav？先看内容本质
语义错误是右侧导航出问题的第一原因。如果右边放的是「相关文章」「分类目录」「文档大纲跳转」，它就是导航行为，该用 nav；如果放的是「作者简介」「广告位」「引用说明」，才是 aside 的合理场景。
-
nav被屏幕阅读器识别为“导航区域”，能播报链接总数和上下文，aside则被读作“补充内容”，辅助技术可能直接跳过 - 混用没问题：比如
nav里嵌一个aside放当前作者头像和简介，语义更细 - 别把一堆
a直接塞进nav：必须套ul+li，否则部分读屏器无法建立列表关系
flex 布局下右侧栏宽度不自适应？关键在父容器和 main 的 flex 值
右侧导航不是靠“右浮动”或“position: absolute”硬塞过去的，现代写法靠 display: flex 的空间分配逻辑。
- 父容器（比如
div class="layout"）必须设display: flex和gap，不能只给子元素加 flex 属性 -
main区域加flex: 1，它才会自动占满剩余宽度；写flex: 0 1 auto或留空都可能失效 - 右侧栏推荐用
width: 280px（不是flex: 0 0 280px），固定宽更可控，小屏下也不易被压扁 - 如果右侧栏内容超长，记得给它加
overflow-y: auto，不然会撑爆视口高度
右侧导航在手机上消失或错位？媒体查询断点设错了
很多项目一到 iPhone 就崩，不是 JS 没绑事件，而是 CSS 断点把 iPad 当成手机处理了。
- 别用
@media (max-width: 768px)：iPad 竖屏（768px）完全匹配，导致桌面平板也折叠 - 小屏折叠用
@media (max-width: 480px)，覆盖 iPhone SE 到 iPhone 13 竖屏全系 - 中等屏（如 iPad 竖屏）单独写一条：
@media (min-width: 481px) and (max-width: 1024px)，把右侧栏缩窄到 220px，而非display: none - 避免
device-width：这个值受缩放、浏览器 UI 栏影响大，现代项目基本弃用
右侧导航固定在视口右侧？position: fixed 很危险
只有当明确要求“永远不随页面滚动”时才考虑 position: fixed，否则优先用 flex。
立即学习“前端免费学习笔记（深入）”；
- 用了
position: fixed必须给main加margin-right: 280px（或padding-right），否则内容会被遮挡 - 同时要设
html, body { height: 100% }，否则 fixed 元素高度计算异常 - 绝对不要混用：
position: fixed和父容器display: flex共存，Chrome 和 Safari 渲染结果可能不一致 - 更稳妥的替代方案：用
position: sticky; top: 0; right: 0;，它只在滚动到临界点时粘住，不破坏文档流
右侧导航真正难的不是“怎么贴右边”，而是“内容角色判断是否准确”和“小屏下信息优先级是否被误判”。很多团队花两小时调动画，却漏掉一个 nav 和 aside 的语义切换——那才是用户看不见但机器立刻感知到的缺陷。
