用 @media 切换 content 实现 LOGO 文字变图？不行
直接在伪元素里用 content: url(...) 配合媒体查询切换 LOGO 图片，看似简洁，但实际不可靠——content 的 url() 值在多数浏览器中不支持响应式重载，且无法控制图片尺寸、加载失败降级，更关键的是：它不能用于替换已有 <img alt="CSS如何实现响应式的页眉LOGO切换_通过媒体查询更换content属性或背景" > 或背景图，仅适用于 ::before/::after 生成内容。真要换 LOGO，优先走 DOM 或背景图方案。
LOGO 是 <img alt="CSS如何实现响应式的页眉LOGO切换_通过媒体查询更换content属性或背景" > 标签时，用 srcset + sizes 最稳妥
这是现代响应式 LOGO 的默认解法，浏览器原生支持，语义清晰，可缓存、可懒加载、失败时自动 fallback。
常见错误现象：srcset 只写分辨率描述符（如 2x）却不配 sizes，导致小屏设备仍加载大图；或把 SVG 和 PNG 混在同一 srcset，引发解析错误。
-
src必须保留，作为所有浏览器的兜底路径，比如logo-small.png -
srcset按宽度描述符组织，例如："logo-small.png 320w, logo-medium.png 768w, logo-large.png 1200w" -
sizes要匹配布局断点，例如："(max-width: 767px) 100vw, (max-width: 1199px) 200px, 240px" - SVG 文件建议单独用
<picture></picture>包裹，通过<source media></source>控制，避免 raster 图片误用矢量路径
LOGO 用 CSS 背景图时，@media 换 background-image 是正解
适合纯装饰性 LOGO、或需要统一控制尺寸/定位的场景。关键不是“换 content”，而是换背景图本身，并确保容器尺寸响应式收缩。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：background-size: contain 在高 DPR 屏幕下可能模糊；没设 background-repeat: no-repeat 导致平铺；媒体查询顺序错乱（移动优先需从 min-width 向上写，否则会被覆盖）。
- 基础写法：给 LOGO 容器设固定宽高或
aspect-ratio，再用background-size: contain和background-position: center - 媒体查询内只改
background-image，别动background-size—— 否则小图在大容器里被拉伸 - 为高清屏准备
@2x版本时，用image-set()（Chrome/Firefox 支持），或退而求其次，在@media (-webkit-min-device-pixel-ratio: 2)里覆盖background-image - 务必加
background-color占位色，防止图片加载中白屏
为什么不用 display: none 切换两个 LOGO 元素？
DOM 中放两套 <img alt="CSS如何实现响应式的页眉LOGO切换_通过媒体查询更换content属性或背景" >，靠媒体查询控制显隐，看似简单，但有隐藏成本：
- 无论是否显示，两个图片都会发起 HTTP 请求，浪费带宽和解析时间
- SSR 或静态站点生成时，服务端无法预判设备宽度，可能同时输出两套资源
- 无障碍阅读器可能读出隐藏 LOGO 的
alt文本，造成混淆 - 若 LOGO 含交互（如点击跳首页），需同步管理两套事件绑定，易漏
除非 LOGO 差异极大（比如深色模式下文字反转+图标翻转），否则没必要引入双 DOM 结构。
真正要注意的是：LOGO 的宽高比是否在各断点下保持一致。很多“切换失败”其实源于容器高度塌陷或 aspect-ratio 未适配 flex/grid 布局，这时候调媒体查询不如先查容器渲染逻辑。
