首页视频背景响应问题：CSS媒体查询无效，移动端无法全屏覆盖

问题根源分析 #

你的视频背景无法在移动端全屏覆盖，核心问题在于：

• #hero容器未设置position: relative，导致绝对定位的视频以整个文档为参照，而非#hero容器
• 媒体查询中对视频使用硬编码的height:145%，无法适配不同屏幕比例
• 移动端将#hero的height设为auto，导致容器高度随内容变化，视频无法覆盖全屏

修复后的CSS代码 #

#background-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  z-index: -1; /* 确保视频在文字下方 */
}

#hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative; /* 关键：让内部绝对定位元素以该容器为参照 */
  overflow: hidden; /* 裁剪视频超出容器的部分 */
}

#hero:before {
  content: "";
  background: rgba(0, 0, 0, 0.6);
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0; /* 叠加层在视频上方、文字下方 */
}

#hero .container {
  position: relative;
  padding-top: 74px;
  text-align: center;
  z-index: 1; /* 确保文字在最上层 */
}

#hero h1 {
  margin: 0;
  font-size: 56px;
  font-weight: 700;
  line-height: 64px;
  color: #fff;
  font-family: "Poppins", sans-serif;
}

#hero h1 span {
  color: #ffc451;
}

#hero h2 {
  color: rgba(255, 255, 255, 0.9);
  margin: 10px 0 0 0;
  font-size: 24px;
}

#hero .icon-box {
  padding: 30px 20px;
  transition: ease-in-out 0.3s;
  border: 1px solid rgba(255, 255, 255, 0.3);
  height: 100%;
  text-align: center;
}

#hero .icon-box i {
  font-size: 32px;
  line-height: 1;
  color: #ffc451;
}

#hero .icon-box h3 {
  font-weight: 700;
  margin: 10px 0 0 0;
  padding: 0;
  line-height: 1;
  font-size: 20px;
  line-height: 26px;
}

#hero .icon-box h3 a {
  color: #fff;
  transition: ease-in-out 0.3s;
}

#hero .icon-box h3 a:hover {
  color: #ffc451;
}

#hero .icon-box:hover {
  border-color: #ffc451;
}

@media (min-width: 1024px) {
  #hero {
    background-attachment: fixed;
  }
}

@media (max-width: 768px) {
  #hero h1 {
    font-size: 28px;
    line-height: 36px;
  }
  #hero h2 {
    font-size: 20px;
    line-height: 24px;
  }
}

关键修改点说明 #

1. 给#hero添加position: relative：让视频和叠加层的绝对定位基于#hero容器，而非整个页面
2. 添加overflow: hidden到#hero：防止视频因object-fit: cover超出容器显示
3. 设置层级z-index：明确视频、叠加层、文字的显示顺序，避免内容被遮挡
4. 移除硬编码的视频高度：保留width:100%和height:100%，配合object-fit:cover自动适配屏幕比例
5. 移动端保留min-height:100vh：确保#hero始终占满屏幕高度，视频能完全覆盖

修正后的HTML结构 #

<div id="hero">
  <div class="container" data-aos="fade-up">
    <video id="background-video" autoplay loop muted>
      <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
    </video>
    
    <div class="row justify-content-center" data-aos="fade-up" data-aos-delay="150">
      <div class="col-xl-6 col-lg-8">
        <h1>WELCOME HOME<span>.</span></h1>
      </div>
    </div>

    <div class="row gy-4 mt-5 justify-content-center" data-aos="zoom-in" data-aos-delay="250">
      <div class="col-xl-2 col-md-4">
        <div class="icon-box">
          <i class="bi bi-person-bounding-box"></i>
          <h3><a href="#services">RECRUITMENT & PLACEMENT </a></h3>
        </div>
      </div>
      <div class="col-xl-2 col-md-4">
        <div class="icon-box">
          <i class="bx bx-world"></i>
          <h3><a href="#services">TALENT MAPPING</a></h3>
        </div>
      </div>
      <div class="col-xl-2 col-md-4">
        <div class="icon-box">
          <i class="bx bx-tachometer"></i>
          <h3><a href="#services">ONBOARDING OPTIMISATION</a></h3>
        </div>
      </div>
      <div class="col-xl-2 col-md-4">
        <div class="icon-box">
          <i class="bi bi-airplane"></i>
          <h3><a href="#services">3RD PARTY EXIT INTERVIEWS</a></h3>
        </div>
      </div>
      <div class="col-xl-2 col-md-4">
        <div class="icon-box">
          <h3><a href="#services">SEE MORE OF OUR SERVICES</a></h3>
        </div>
      </div>
    </div>
  </div>
</div>

注意：原HTML缺少#hero容器，必须将所有内容包裹在<div id="hero">内，否则CSS样式无法生效。

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