纯CSS可实现响应式且不卡顿的导航栏，关键在于语义化结构（<nav><ul><li><a>）、伪元素控制、精准媒体查询断点、:hover/:focus双状态反馈、避免重排动画、clamp()字体适配及真机读屏测试。
纯 CSS 就能做出既响应式又不卡顿的导航栏，关键不在花哨动效，而在结构语义、伪元素控制和媒体查询的精准断点。
导航栏 HTML 结构必须用 <nav> + <ul>，别用 <div> 堆
浏览器和读屏器靠语义标签识别导航区域。<nav> 是必需的容器，内部必须是 <ul> 包裹 <li>，每个 <a> 放在 <li> 里——不是为了“规范”，是为了避免焦点顺序错乱、键盘 Tab 跳转漏项、以及 Safari 在 iOS 上对 <div> 导航的兼容降级。
常见错误现象：Tab 键跳过某些菜单项，或屏幕阅读器念成“段落 1”“段落 2”而不是“首页”“关于”。
- 正确写法：
<nav><ul><li><a href="/">首页</a></li></ul></nav> - 绝对不要：
<div class="nav"><div><a>首页</a></div></div> - 移动端折叠按钮也得是
<button type="button">，不能用<div onclick>—— 否则无法空格/回车触发，且无 focus 样式
:hover 和 :focus 样式必须同时写，且不可只靠颜色区分
只写 :hover 会直接让键盘用户失效；只依赖颜色变化（比如仅改文字色）违反 WCAG 1.4.1 对比度和非颜色标识的要求。
立即学习“前端免费学习笔记（深入）”；
实操建议：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 统一加
outline: 2px solid #007bff;或box-shadow: 0 0 0 2px rgba(0,123,191,0.25);给:focus，别删outline: none -
:hover可配合背景色+图标旋转+下划线，但必须保留与:focus一致的轮廓反馈 - 悬停动画用
transition: background-color 0.2s, transform 0.2s;，别用width或height动画——会触发重排，滚动时卡顿
移动端折叠菜单的 max-height 过渡要慎用
直接对 <ul> 设 max-height: 0; → max-height: 500px; 看似简单，但实际高度不确定时会导致过渡生硬、收不全或闪跳。
更稳的解法是用 height: auto; 配合 overflow: hidden; + JS 测高，或干脆放弃高度过渡，改用 opacity + transform：
- 开菜单：
opacity: 1; transform: translateY(0); - 关菜单：
opacity: 0; transform: translateY(-10px); - 过渡写在
transition: opacity 0.25s, transform 0.25s; - 注意：
transform触发 GPU 加速，比height更顺，且不占文档流，不会影响下方元素布局
字体和间距别死磕 px，用 rem + clamp() 控制可读性
导航文字太小，老人看不清；太大，移动端一行挤不下。固定 16px 或 1rem 在不同设备上表现差异极大。
推荐写法：
- 字号用：
font-size: clamp(0.875rem, 4vw, 1.125rem);—— 小屏保底，大屏上限，中间按视口缩放 - 行高用：
line-height: 1.4;（无单位），避免继承放大 - 内边距用：
padding: 0.5rem 1rem;，别写padding: 8px 16px;—— rem 在缩放字体时同步缩放，px 不会 - 特别注意：
clamp()在 Safari 13.1+ 才支持，老版本需 fallback：font-size: 1rem; font-size: clamp(...);
真正难的不是做出“好看”的导航栏，是让折叠逻辑不抢焦点、悬停反馈不丢键盘用户、文字在 200% 缩放时依然对齐不换行——这些细节没测过真机和读屏器，再炫的 CSS 也算白搭。
