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