最稳妥的导航结构是 nav + ul，需保证可访问性、可缩放性和可聚焦性；ul 包裹 li 再包 a 是唯一广泛验证的流式结构；避免 div 模拟导航项，a 必须有明确 href；li 不设固定宽高；移动端断点建议 max-width: 768px；折叠菜单宜用 checkbox + label 实现无 js 切换；展开态 ul 需 absolute/fixed 定位；flex 布局中优先 nowrap + overflow-x: auto；字体最小 0.875rem，line-height 至少 1.5；折叠后首个链接须自动获焦点。
导航结构用 nav + ul 是最稳妥的语义起点
别一上来就套 flex 或 grid，先保证结构可访问、可缩放、可聚焦。浏览器默认样式对 nav 有隐式语义支持，屏幕阅读器能识别；ul 包裹 li 再包 a，是唯一被广泛验证的导航流式结构。
- 避免用
div模拟导航项——键盘 Tab 顺序会乱，aria-current等属性难生效 - 每个
a必须有明确href（哪怕临时用#），空链接或javascript:void(0)会破坏可访问性 - 不要给
li设固定宽高，它应随文字自然撑开，否则小屏下文字换行或溢出
移动端折叠前必须明确断点与触发逻辑
响应式不是“加个 @media 就完事”。关键在判断：什么时候该收？收成什么？用户怎么展开？很多项目卡在这一步，最后变成桌面端正常、手机端点不开菜单。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 断点建议用
max-width: 768px（非像素值，而是基于内容密度判断）——比硬写480px更可靠 - 折叠后用
checkbox+label实现无 JS 切换（避免 JS 失效时菜单永远关闭） - 展开态的
ul必须设position: absolute或fixed，否则会撑开页面高度，导致滚动错位
display: flex 布局中 flex-wrap 和 justify-content 的取舍
水平铺满还是左对齐？是否允许换行？这些决定导航在中等屏幕（如 iPad 横屏）下的表现。盲目设 flex-wrap: wrap 可能导致二级菜单错位，而死守 nowrap 又容易溢出。
- 桌面端优先用
flex-wrap: nowrap+overflow-x: auto（配合scrollbar-width: none隐藏滚动条）比换行更可控 - 若必须换行（比如多语言站点导航词很长），
justify-content: flex-start比space-between更安全——后者会在最后一行留巨大空白 - 慎用
flex: 1给每个li，它会让窄屏下文字被强行压缩甚至省略，用min-width: fit-content更合理
字体大小与行高在不同视口下的实际影响
很多人调完 font-size: 1rem 就以为响应式完成了，结果在 iPhone 上文字挤在一起、点击热区过小。真正影响可用性的不是“是否缩放”，而是“缩放后是否仍可精准点击”。
- 导航文字最小推荐
font-size: 0.875rem（14px），iOS Safari 默认文本缩放会把它压到 12px 以下，再小就难识别 -
line-height至少设为1.5，否则紧凑布局下上下文字贴太近，视觉上像连在一起 - 用
padding-block: 0.5rem替代padding-top/padding-bottom，它会随字体大小自适应，比固定px值更可靠
a 没有自动获得焦点，键盘用户得按多次 Tab 才进得去。这不属于“样式问题”，但直接影响可用性。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
