CSS媒体查询实现响应式Logo图片替换

在响应式设计过程中，切换Logo图片是一项常见但容易出错的需求。很多开发者首先想到的是借助CSS中的@media规则，修改::before或::after伪元素的content属性。然而，这种做法并不可行。CSS规范明确规定，content: url()的路径无法通过媒体查询动态切换。可行的解决方案包括使用background-image配合媒体查询，或者采用更现代的加srcset结构。下面将详细解析这些方法。

使用媒体查询通过content替换图片：不可行的方案

很多人尝试在::before或::after伪元素中使用content: url(logo-sm.png)，并在媒体查询中将其修改为content: url(logo-md.png)。但浏览器通常会忽略第二次赋值，仅保留首次解析的值。CSS规范严格限制了content属性的行为：一旦使用url()声明，就无法通过媒体查询动态切换路径（除非使用attr()等方法，但这不适用于图片切换）。

典型无效写法（请勿使用）：

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结构允许调整，元素比CSS背景图更为合理。它原生支持响应式图片、设备像素比适配以及格式协商（如自动降级到WebP），并且对SEO和无障碍访问更友好。关键点包括：

• 的media属性对应断点，srcset处理分辨率切换。
• 必须包含作为fallback，否则无JavaScript时可能出现白屏。
• 添加width和height属性以防止布局偏移。

示例：

为何不推荐使用object-fit配合img元素

有人认为使用普通元素加上object-fit: contain，再通过媒体查询调整width和height即可。但实际应用中存在不少问题：

• 不同尺寸的Logo设计往往不是简单的等比缩放，移动端小图可能省略了标语，而桌面端大图包含完整细节，直接缩放可能导致文字模糊或留白畸形。
• 移动端和桌面端的设计稿通常是两套独立的，不能通过简单拉伸解决。
• object-fit在旧版iOS Safari（低于iOS 10）中存在兼容性问题。

因此，切换图片本质上是切换设计稿，而非调整尺寸，若忽视这一点，PC端效果尚可，但平板设备上文字可能模糊不清。