响应式导航需语义化嵌套与flex布局协同：nav应为header直接子元素或与main同级，用flex分配空间；窄屏需父容器设flex-direction:column、ul设flex-wrap:wrap、li禁用压缩；避免fixed定位硬编码，必加viewport meta。
响应式导航本身不直接“调整页面布局”，它只是导航区域的自适应行为；真正影响整体页面布局的是你如何把 <nav></nav> 和其他内容容器（如 <main></main>、<aside></aside>）组织在一起，以及用什么 CSS 布局模型去约束它们。错把导航当成布局控制器，是很多人调半天页面错位、侧边栏遮挡、移动端堆叠失效的根源。
nav 放在哪个 HTML 容器里，决定了它能控制多大范围
常见错误是把 <nav></nav> 直接塞进 顶层，然后靠 position: fixed 强行定位——结果 <main></main> 内容被盖住、滚动异常、打印样式全乱。正确做法是让它成为语义化容器的子项：
-
<header></header>是最自然的父容器，适合顶部横幅式导航；<nav></nav>应为<header></header>的**直接子元素**，避免中间夹一层<div class="wrapper"> 破坏 flex 上下文 <li>若要做侧边垂直导航，<code><nav></nav>应和<main></main>同级，共同包裹在<div class="layout"> 或 <code>下，并由该父容器统一用display: flex分配空间 - 不要在一个页面里写多个
<nav></nav>并都设position: fixed——z-index 冲突、键盘焦点跳转错乱、iOS Safari 滚动卡顿会集中爆发 - 确保
nav ul是 flex 容器（display: flex），且nav li没设flex-shrink: 1（默认值）——加flex: 0 0 auto禁止压缩，否则文字被压扁、图标错位 -
nav ul必须加flex-wrap: wrap，窄屏时才允许折行；只靠column会强制单列，但若高度不够，反而撑出滚动条 - 如果用了
height: 0; overflow: hidden做收起动画，别忘了展开态要设具体height值（如height: 200px）或改用max-height（max-height: 0→max-height: 300px），因为height: auto无法参与 transition - 真正响应式的做法：用
display: flex父容器控制比例，例如.layout { display: flex; } nav { flex: 0 0 240px; } main { flex: 1; }，再配合媒体查询动态调flex-basis - 如果必须用
position: fixed，则main应用padding-left而非margin-left，并确保html, body { height: 100% }，否则 fixed 元素可能因父容器无高度而定位失效 - 别混用
position: fixed和flex子项：Chrome 可能渲染为固定位置，Safari 却当普通 flex 项处理，导致布局漂移
flex-direction: column 在小屏下不是“自动堆叠”，而是要主动触发
很多人写了 @media (max-width: 768px) { nav { flex-direction: column; } }，但发现导航项还是横着挤成一团。问题往往出在父容器没同步改，或子项没释放收缩权限：
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
侧边栏导航 + 主内容的宽度分配不能靠 margin-left 硬顶
用 position: fixed 做常驻侧边栏时，很多人给 <main></main> 加 margin-left: 250px 来避让，结果 iPad 横屏下留白过大、缩放后错位、打印时内容被切掉。这不是响应式，是像素硬编码：
立即学习“前端免费学习笔记（深入）”；
最易被忽略的一点：所有这些布局调整，都依赖 <meta name="viewport" content="width=device-width, initial-scale=1"> 这一行。漏掉它，iOS Safari 会按 980px 渲染，媒体查询全部失效，再精细的 flex 规则也白搭。
