响应式 header 必须添加 viewport 元标签、使用 flex/grid 布局、采用相对单位（rem/em）、语义化标签（header/nav）并兼顾可访问性，避免 float/px/vh 等错误用法。
header 要真正响应式，光靠 width: 100% 或 position: fixed 不够——它得随视口缩放、内容自适应、语义正确，且不破坏滚动和可访问性。
必须加 viewport 元标签，否则 header 在手机上会“错位”
没有这行，iOS Safari 和部分安卓浏览器会按 980px 宽度渲染页面，header 看起来窄、文字挤、导航栏折行异常。不是样式问题，是整个视口基准错了。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">是硬性前提，必须写在<head>里 - 别加
maximum-scale或user-scalable=no，会破坏无障碍缩放（WCAG 1.4.4） - IE9+ 支持该标签；老 IE 需要 polyfill，但 2026 年基本可忽略
用 flex 或 grid 布局 header 内部结构，别用 float 或 inline-block
常见错误是给 nav 加 float: right，结果小屏下导航直接掉到下一行、与 logo 重叠，且无法用媒体查询干净收拢。
- 推荐写法：
header { display: flex; justify-content: space-between; align-items: center; } - logo 和 nav 各占一个 flex item，小屏时用
@media (max-width: 768px)改成flex-direction: column或加汉堡菜单 - 避免
display: inline-block+vertical-align，不同字体 baseline 不一致，移动端高度对不齐 - 如果要用图标字体或 SVG，确保
height和line-height一致，否则文字会偏移
字体大小和 padding 要用相对单位，不能写死 px
写 font-size: 16px 的 header，在 iPhone 上可能被强制放大，导致布局撑开或换行；写 padding: 10px 会让小屏 header 显得臃肿、大屏又太紧。
立即学习“前端免费学习笔记（深入）”；
- 优先用
rem：基于根字号缩放，配合html { font-size: clamp(14px, 1.5vw, 18px); } - 垂直间距用
em或rem，比如padding: 0.75rem 1rem，比px更可控 - 慎用
vh做 header 高度（如height: 10vh），iOS Safari 滚动时视口高度会跳变，header 可能忽高忽低
语义化标签 + 可访问性属性不能省
只用 <div class="header"> 不仅 SEO 弱，屏幕阅读器也无法识别这是页面头部，用户无法快速跳转。
- 必须用
<header>标签，且最好包裹<nav>（如果有主导航） - 若 header 含搜索框，加
role="search"和aria-label="站内搜索" - 汉堡菜单按钮需有
aria-expanded和aria-controls，否则视障用户不知道它控制什么 - 不要用
display: none隐藏小屏导航，改用visibility: hidden+position: absolute或clip-path，保证语义仍存在
最易被忽略的是：header 的 min-height 和 overflow 行为。内容动态加载（比如异步插入导航项）后，若没设 min-height: auto 或未清除浮动，可能导致父容器塌陷；而 overflow: hidden 虽能清浮动，但会剪裁绝对定位的下拉菜单——这些细节，往往在线上环境才暴露。
