桌面与移动端用两套HTML结构并靠display切换是最可控、无障碍友好的做法，不依赖JS，服务端可输出正确结构，语义清晰；需确保交互行为一致、LOGO用srcset+sizes响应式加载、背景图用@media切换、Flex方向切换时重置对齐与尺寸、补全viewport声明和safe-area适配。
桌面与移动端用两套 HTML 结构，靠 display 切换
直接在 DOM 里放两套页眉结构（比如 .desktop-header 和 .mobile-banner），再用媒体查询控制显隐，是最可控、无障碍友好的做法。它不依赖 JS，服务端也能输出正确结构，且语义清晰。
-
.desktop-header默认显示，.mobile-banner默认display: none - 在
@media (max-width: 768px)中把.desktop-header设为display: none，.mobile-banner设为display: block或flex - 避免给隐藏元素设
visibility: hidden——它仍占空间，且读屏器可能播报 - 如果页眉含交互（如点击跳转），确保两套结构的
href或onclick行为一致，别漏掉移动端版本
LOGO 切换优先用 srcset + sizes，不是 media 查询
当页眉 LOGO 是 <img> 标签时，用 CSS 媒体查询切换 src 不可行（HTML 属性不能被 CSS 修改）。正确做法是用原生响应式属性：
-
src必须保留，作为所有浏览器兜底路径，例如logo-small.png -
srcset按宽度描述符组织："logo-320w.png 320w, logo-768w.png 768w, logo-1200w.png 1200w" -
sizes要匹配布局断点："(max-width: 767px) 100vw, (max-width: 1199px) 200px, 240px" - 别混用 SVG 和 PNG 在同一个
srcset里——浏览器解析会失败
背景图切换用 @media 直接改 background-image
页眉用 CSS 背景图时，媒体查询改 background-image 是正解，尤其适合“艺术指导”场景（比如桌面端用竖构图图，移动端用横构图图）。
- 确保容器尺寸本身也响应式收缩，否则图会拉伸或留白；
background-size: cover通常比contain更可靠 - 移动端高 DPR 屏幕下模糊？加
@media (-webkit-min-device-pixel-ratio: 2)单独覆盖高清图，或用image-set()（Chrome/Firefox 支持） - 别忘了设
background-repeat: no-repeat，否则小图可能平铺 - 媒体查询顺序很重要：移动优先就从
min-width往上写，否则大屏规则会被小屏规则覆盖
Flex 布局切换方向时，必须重置对齐和尺寸逻辑
小屏下把 flex-direction: row 切成 column 很常见，但容易忽略配套调整，导致文字截断、高度塌陷或对齐错乱。
立即学习“前端免费学习笔记（深入）”；
- 切回横排时，旧的
height值还在，得显式重置为auto或具体值 - 别用
text-align: left控制文字位置——竖排/横排切换后语义失效，改用text-align: start - 垂直居中用
align-items: center，但小屏flex-direction: column后，它控制的是水平居中，需同步改justify-content: center - 避免在
display: flex父容器上直接切writing-mode——应在纯文本块内操作，否则布局计算异常
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 缺了，媒体查询基本形同虚设；而页眉高度若只写 height: 100vh，iOS Safari 滚动时地址栏收放会导致内容被截或留白——得用 env(safe-area-inset-top) 或 dvh 单位补足。 
