不用JavaScript也能实现自适应导航栏，关键在于用<input type="checkbox">模拟开关状态，HTML必须采用语义化<nav><ul><li><a>结构，CSS用max-width: 768px媒体查询、~兄弟选择器和position: relative/absolute精准控制显隐与定位。
不用 JavaScript 也能做出可用的自适应导航栏，但必须用 <input type="checkbox"> 模拟开关状态——否则移动端点一下就跳转或完全没反应，这是最常卡住人的地方。
HTML 结构必须用 <nav> + <ul> + <li> + <a>
语义化结构不是“加分项”，而是功能前提：屏幕阅读器、SEO、CSS 选择器稳定性都依赖它。嵌套错误（比如 <ul> 里直接放 <div>）会导致 CSS :checked 逻辑失效，或者下拉菜单无法定位。
-
<nav>必须包裹整个导航，建议加aria-label="主导航" - 每个菜单项必须是
<li><a href="...">首页</a></li>，不能省略<li> - 当前页链接加
aria-current="page"，方便辅助技术识别 - 下拉菜单写成
<li><a href="#">产品</a><ul class="submenu">...</ul></li>，子<ul>必须在<li>内部
CSS 媒体查询断点要设 max-width: 768px，别用 min-width
小屏设备种类多，min-width 容易漏掉宽度刚好卡在边界上的设备（比如某些折叠屏半开状态）。max-width: 768px 是经过大量实测的兼容性分界点，覆盖绝大多数手机和平板竖屏。
- 默认样式（桌面端）用
display: flex，禁用flex-shrink：每个<a>加flex: 0 0 auto - 移动端菜单默认
display: none，用@media (max-width: 768px) { ... }控制显隐 - 汉堡按钮用
<label for="menu-toggle">☰</label>，对应<input id="menu-toggle" type="checkbox"> - 展开逻辑靠
#menu-toggle:checked ~ nav ul { display: block; }，注意~是通用兄弟选择器，不能写成>
<a> 标签必须设 display: block，且 hover/focus 样式要同时定义
不设 display: block 的后果是：点击热区只在文字上，触控体验极差；Safari 对未定义 a:link 和 a:visited 的链接会忽略 background-color 等 hover 效果，看起来“点不动”。
立即学习“前端免费学习笔记（深入）”；
- 统一加
a:link, a:visited { color: #333; text-decoration: none; } - 交互样式写成
a:hover, a:focus { background-color: #f0f0f0; }，确保键盘用户也能看到反馈 - 移动端下拉菜单的
<ul class="submenu">要加position: absolute，且其父级<li>必须设position: relative - 避免用
top: 100%，改用transform: translateY(100%)防止像素对齐缝隙和 iOS 重绘闪烁
viewport 和 body padding 是硬性配套项
没有 <meta name="viewport" content="width=device-width, initial-scale=1">，所有媒体查询都会失效；固定定位导航栏（position: fixed）若不给 <body> 加 padding-top，页面内容会被遮挡——这两个问题在真机调试时才暴露，但修复成本极低。
-
<meta>标签必须放在<head>内，且不能重复或遗漏 - 如果导航高 60px，
body { padding-top: 60px; }是最低成本解法，比margin-top更可靠 - 不要用
position: sticky替代fixed来绕过 padding，它在部分安卓 WebView 中支持不稳
真正难的不是写出能跑的代码，而是让「文字变长」「翻译后换行」「iOS Safari 滚动」「键盘 Tab 导航」这些边缘情况都不出错——它们全藏在 flex-shrink、position: relative、a:link 这些看似琐碎的细节里。
