媒体查询（Media Query）失效求助：移动端Footer覆盖内容问题

问题回顾 #

你给固定在页面底部的Footer写了基础样式，中大屏显示正常，但小屏设备里Footer会覆盖内容，于是你加了针对小于768px设备的媒体查询，想把Footer和占位元素#bump的高度翻倍，结果媒体查询完全没生效——开发者工具里显示高度还是150px。先把你的代码贴出来方便分析：

基础样式：

#bump { margin-top: 50px; height:150px; } 
#footer { 
  padding-top: 5px; 
  min-height: 150px; 
  background-color: #284602; 
  color: #ecf0f1; 
  position:absolute; 
  bottom:0; 
  width: 100%; 
}

你添加的媒体查询：

// Small devices (landscape phones, less than 768px) 
@media only screen and (max-width: 768px) { 
  #bump { margin-top: 50px; height:300px; } 
  #footer { 
    padding-top: 5px; 
    min-height: 300px; 
    background-color: #284602; 
    color: #ecf0f1; 
    position:absolute; 
    bottom:0; 
    width: 100%; 
  } 
}

核心问题排查与解决 #

1. 注释语法错误（最可能的原因）

你在媒体查询开头用了//来写注释，但CSS不支持//单行注释——这是JS、SCSS这类语言的语法。浏览器会把//后面的内容解析成无效代码，直接导致整个媒体查询块失效。

把注释改成CSS标准的/* */格式就行：

/* Small devices (landscape phones, less than 768px) */
@media only screen and (max-width: 768px) { 
  #bump { margin-top: 50px; height:300px; } 
  #footer { 
    padding-top: 5px; 
    min-height: 300px; 
    background-color: #284602; 
    color: #ecf0f1; 
    position:absolute; 
    bottom:0; 
    width: 100%; 
  } 
}

2. 样式优先级或位置问题

虽然你说把媒体查询放在了style.css末尾，但再确认一下：有没有其他地方的CSS（比如内联样式、带!important的规则）覆盖了这个媒体查询的样式？

打开开发者工具，选中#footer元素，看**Computed（计算样式）**面板里的min-height，如果显示的是150px，往下找对应的样式来源，看看是不是有优先级更高的规则在起作用。如果是，要么给媒体查询里的选择器加权重（比如改成body #footer），要么去掉冲突的!important。

3. 断点取值的精度问题

很多前端框架（比如Bootstrap）的小屏断点是max-width: 767.98px而不是768px——因为768px刚好是平板的临界宽度，有些设备的宽度可能刚好卡在768px，导致媒体查询没触发。

可以把断点改成767.98px试试：

@media only screen and (max-width: 767.98px) {
  /* 你的样式 */
}

更稳妥的固定Footer方案（推荐） #

用绝对定位做固定Footer很容易出现响应式覆盖问题，推荐用Flex布局实现，代码更简洁，适配性更好：

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0; /* 去掉默认边距 */
}
#bump {
  flex: 1; /* 让这个区块自动填充页面剩余空间，把Footer挤到底部 */
  margin-top: 50px;
}
#footer {
  padding-top: 5px;
  min-height: 150px;
  background-color: #284602;
  color: #ecf0f1;
  width: 100%;
}
/* 小屏下只需要修改Footer高度 */
@media only screen and (max-width: 767.98px) {
  #footer {
    min-height: 300px;
  }
}

这种方法不需要给#bump设置固定高度，它会自动占满页面剩余空间，Footer始终固定在底部，小屏下也不会出现覆盖内容的情况。

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