在@media中直接用content替换图片无效，因CSS禁止动态修改content: url()路径；应改用background-image配合媒体查询，或更优的<picture> + srcset方案。
media query里用content替换图片行不通
直接在@media规则中对::before或::after伪元素的content属性换图，是无效的。CSS规范明确禁止在content中使用url()以外的值做条件切换，而媒体查询无法动态改变content: url(...)的路径——浏览器会忽略带路径变更的重写，只保留首次解析的值。
常见错误写法（不起作用）：
logo::before {
content: url(logo-sm.png);
}
@media (min-width: 768px) {
logo::before {
content: url(logo-md.png); /* ❌ 大部分浏览器不执行 */
}
}真正可行的方案：用background-image + 媒体查询切换
把Logo作为容器的背景图，通过background-image配合媒体查询控制加载哪张图，是最稳定、兼容性最好的方式。需确保容器有固定宽高或内联尺寸，否则背景可能不显示。
- 必须给容器设
display: block或inline-block，且明确width和height - 用
background-size: contain或cover控制缩放行为，避免拉伸失真 - 为避免首次加载闪动，建议三张图尺寸比例一致（如都是1:1或4:1），且命名可预测（便于CDN缓存）
示例：
立即学习“前端免费学习笔记（深入）”；
.logo {
display: inline-block;
width: 120px;
height: 32px;
background-image: url(logo-1x.png);
background-size: contain;
background-repeat: no-repeat;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.logo {
background-image: url(logo-2x.png);
}
}
@media (min-width: 768px) {
.logo {
width: 180px;
height: 48px;
background-image: url(logo-md.png);
}
}更现代的替代：picture + srcset（语义更准，但需HTML配合）
如果能改HTML，<picture>是比CSS背景图更合理的选择——它原生支持响应式图片、DPR适配、格式协商（如WebP fallback），且对SEO和无障碍更友好。
-
<source>的media属性对应断点，srcset处理分辨率 - 必须保留
<img>作为fallback，否则无JS时可能空白 - 注意
width/height属性仍要写，防止布局偏移（layout shift）
示例：
立即学习“前端免费学习笔记（深入）”；
<picture class="logo"> <source media="(min-width: 768px)" srcset="logo-md.webp 1x, logo-md@2x.webp 2x" type="image/webp"> <source media="(min-width: 768px)" srcset="logo-md.png 1x, logo-md@2x.png 2x"> <source srcset="logo-sm.webp 1x, logo-sm@2x.webp 2x" type="image/webp"> <img src="logo-sm.png" width="120" height="32" alt="公司Logo"> </picture>
为什么不用object-fit + img？
单纯用<img>加object-fit: contain再靠媒体查询调width/height，看似简单，但实际问题不少：
- 不同尺寸Logo往往不是等比缩放，强行缩放会导致文字模糊或留白异常
- 移动端小图和桌面大图通常设计细节不同（比如去掉标语、简化图形），纯缩放无法满足
-
object-fit在老版iOS Safari（
所以“换图”本质是换设计稿，不是换尺寸——这点容易被忽略，结果就是PC端看着还行，Pad上文字糊成一片。
