面包屑导航必须用包裹，各级用，当前页用；分隔符由css伪元素生成，禁用或。
面包屑导航的HTML结构怎么选？
语义化优先，用 <nav></nav> 包裹 <ol></ol> 是最稳妥的选择。搜索引擎和屏幕阅读器能正确识别导航意图，同时 <ol></ol> 天然支持序号语义（即使你视觉上隐藏数字）。避免用 <div> 堆砌或强行用 <code><ul></ul> —— 面包屑有明确层级顺序，<ol></ol> 更准确。
- 每个层级用
<li>，链接放<a></a>里，当前页用<span></span>（不加href） - 不要在
<li>上设固定宽度或min-width，否则破坏自适应 - 分隔符（如
/或>）建议用::after伪元素生成，别硬写在 HTML 里
如何让文字自动换行又不撑破容器？
关键在两处控制：父容器限制最大宽度 + 文字内容柔性折行。很多实现直接给 white-space: nowrap，结果在小屏上溢出滚动条，反而违背“自适应”本意。
- 给
<nav></nav>或外层容器设max-width（比如max-width: 100%或配合clamp()） -
<ol></ol>设display: flex，flex-wrap: wrap - 每个
<li>设flex-shrink: 1和min-width: max-content（防止被压成不可读宽度） - 文字本身加
word-break: break-word或overflow-wrap: break-word，确保长单词/URL也能折行
分隔符怎么对齐才不会错位？
用伪元素比用字符更可控。常见坑是 ::after 在换行后仍强行显示，导致末尾多一个斜杠；或者用 margin-right 导致最后一项右侧空白过大。
- 只给非末项的
<li>添加分隔符：li:not(:last-child)::after - 分隔符设
content: "/"，并加flex-shrink: 0防止被压缩变形 - 如果要用图标（如
>），注意字体渲染差异，可统一用font-family: system-ui减少偏移
响应式断点要设几处？
不需要为每个设备宽度单独写媒体查询。真正影响布局的是内容密度，不是屏幕尺寸。观察用户实际数据：当面包屑层级超过 4 级且单个文本超 12 字时，小屏就容易挤不下。
- 优先用容器查询（
@container）替代媒体查询，但需检查浏览器支持（Chrome 105+、Safari 16.4+） - 兜底方案：在
max-width: 480px时，把<ol></ol>改为flex-direction: column，分隔符改用::before垂直叠加 - 别忘了测试 RTL 语言（如阿拉伯语），
direction: rtl下分隔符位置和flex流向要同步调整
字体大小缩放、链接点击热区、焦点轮廓可见性——这些细节在窄屏上比宽度适配更容易被忽略。
