flex导航栏换行失效因min-width:auto未约束子项宽度，需设min-width:0；ipad媒体查询失效因viewport未声明；汉堡菜单不收起多因class名不一致或事件绑定错误；safari垂直居中偏移源于baseline计算差异，应统一vertical-align:middle。
Flexbox布局让导航栏自动换行却撑破容器
用 display: flex 做导航栏时，flex-wrap: wrap 看似能解决小屏换行，但实际常导致子项宽度失控、文字溢出或高度塌陷。根本原因是没约束子项的最小宽度，默认 min-width: auto 会让 <a></a> 或 <li> 死守内容宽度，拒绝压缩。
- 给导航项加
min-width: 0，允许文本折行或缩放 - 用
flex: 1 1 auto替代flex: 1，避免在窄屏下强行拉伸 - 对链接内联元素加
white-space: nowrap反而会加剧溢出，需配合overflow: hidden和text-overflow: ellipsis（仅适用于单行）
@media 查询断点设成 768px 却在 iPad 上失效
iPad 的物理分辨率高，但 viewport 缩放和设备像素比会让 CSS 媒体查询匹配到错误的宽度。比如 Safari 在横屏 iPad 上可能报告 width: 1024px，但实际 layout viewport 是 768px —— 这取决于 <meta name="viewport"> 是否设置正确。
- 必须声明
<meta name="viewport" content="width=device-width, initial-scale=1">，否则媒体查询基于桌面视口宽度 - 优先用
max-width而非max-device-width，后者已被多数浏览器弃用且不可靠 - 测试时别只看 Chrome DevTools 的“iPad”预设，真机开启「显示开发者工具 → Toggle device toolbar」并手动输入 viewport 尺寸更准
移动端汉堡菜单点击后不收起，JS 绑定失效
常见写法是给按钮加 onclick="toggleMenu()"，但 DOM 加载顺序不对、事件委托缺失或 class 切换逻辑错位，都会导致点击无反应。更隐蔽的问题是：CSS 中用了 display: none 隐藏菜单，但 JS 切换的是 active 类，而样式里却写的是 .menu.show { display: flex } —— 类名不一致直接白忙。
- 确保 JS 获取的是当前 DOM 节点，不是模板字符串或未挂载的克隆节点
- 切换 class 时统一命名，比如固定用
is-open，CSS 写.nav-menu.is-open { display: flex } - 移动端需额外监听
touchstart，部分 iOS Safari 对click有 300ms 延迟，可能导致快速点击失灵
Flex 导航项在 Safari 15.4+ 中垂直居中偏移
Safari 对 align-items: center 在 flex-direction: row 下的 baseline 计算更严格，尤其当导航项含图标+文字混合时，图标若为 inline-block 或 SVG 未设 vertical-align: middle，就会拉低整行基线，造成视觉上浮或下沉。
- 给所有导航项直接子元素（包括
<svg></svg>、<img>）加vertical-align: middle - 避免用
line-height模拟垂直居中，改用align-items: center+height显式定义容器高度 - 若仍偏移，临时加
margin-top: -2px不是解法，应检查是否父容器有未重置的font-size或letter-spacing干扰了行高计算
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
