响应式网站平板竖屏下页脚消失，添加CSS媒体查询未生效如何解决

问题原因 #

1. 现有两条媒体查询未包含任何页脚相关样式规则，不会对页脚的显示状态产生作用
2. 平板竖屏模式下给#home设置了125vh的固定高度，大概率是该元素高度溢出后挤压了页脚排版空间，或是触发了父容器的溢出隐藏规则，导致页脚被裁剪或遮挡
3. 页脚元素添加了wow动画类，部分平板设备下动画触发逻辑异常可能导致页脚默认保持透明/隐藏状态

修复方案 #

1. 新增页脚适配规则 #

在竖屏平板对应的媒体查询下，增加页脚的显示兜底样式：

@media screen and (orientation: portrait) and (max-width: 1024px) {
  /* 原有规则保留 */
  #home {
    height: 125vh;
  }
  .ul--tool {
    columns: 4;
    -webkit-columns: 4;
    -moz-columns: 4;
  }
  .ul--program {
    columns: 4;
    -webkit-columns: 4;
    -moz-columns: 4;
  }
  .service-thumb2 {
    margin-bottom: 22px;
  }
  /* 新增以下页脚样式 */
  footer {
    display: block !important;
    position: relative;
    z-index: 999;
    margin-top: 50px;
    visibility: visible;
  }
}

2. 调整#home高度属性 #

将#home的固定高度改为最小高度，避免内容超出固定高度后挤压后续元素：

@media screen and (orientation: portrait) and (max-width: 1024px) {
  #home {
    min-height: 125vh;
    height: auto;
  }
  /* 其余规则保留 */
}

3. 修复wow动画异常 #

如果是动画触发异常导致页脚隐藏，可添加兜底样式关闭页脚区域的动画效果：

footer .wow {
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
}

内容的提问来源于stack exchange，提问作者Khoa Nguyễn