如何解决Bootstrap中Logo媒体查询尺寸不生效问题

问题根源 #

你的媒体查询未生效，核心原因有两个：

• 你给.logo容器设置max-width，但实际控制Logo显示尺寸的是容器内的<img>标签，容器宽度不会直接影响内部图片的尺寸（除非设置了overflow或图片继承宽度规则）
• Bootstrap的navbar-brand下的图片自带默认CSS样式，你的自定义样式优先级不足，被框架样式覆盖

解决步骤 #

1. 调整选择器，直接作用于图片元素 #

修改媒体查询的目标选择器，确保样式直接作用到Logo图片上，同时提升样式优先级：

/* 先给图片设置基础样式，确保媒体查询能覆盖调整 */
.logo .navbar-brand img {
  width: 100%;
  max-width: 150px; /* 基础尺寸，可按需修改 */
}

@media screen and (min-width:768px) and (max-width:1023px) { 
  .logo .navbar-brand img {
    max-width: 120px; /* 替换为合理数值，避免用过大的rem单位 */
  }
}

@media screen and (min-width:480px) and (max-width:767px) {
  .logo .navbar-brand img {
    max-width: 80px;
  }
}

@media screen and (max-width:479px) {
  .logo .navbar-brand img {
    max-width: 60px;
  }
}

2. 修正单位问题 #

你原代码中使用的100rem、50rem数值过大（默认1rem=16px，100rem相当于1600px），远超出常规Logo尺寸，即使生效也会因容器限制看不出变化，建议使用px或小数值rem。

3. 确保CSS加载顺序 #

你的自定义CSS文件必须放在Bootstrap CSS文件之后加载，这样自定义样式才能覆盖框架的默认样式。

4. 可选：使用Bootstrap内置响应式类 #

如果不想写自定义媒体查询，可直接用Bootstrap的响应式宽度类简化代码：

<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKv8GfX7rnmHMyXoAevE0ErR9XLJn-WQYybg&usqp=CAU" 
     alt="Bootstrap" 
     class="img-fluid" 
     style="max-width: 150px;"
     class="max-w-xs:60px max-w-sm:80px max-w-md:120px">

内容的提问来源于stack exchange，提问作者camilla