视频背景主页不响应不同的屏幕分辨率,CSS媒体查询不工作

我正在工作的网站的主页有一个带有文本覆盖的视频背景，但它对不同的屏幕分辨率没有响应。我试过使用CSS媒体查询，但它仍然不完美。
问题：我试过使用CSS查询和视频，但在移动的设备上没有响应，是的，它播放，但它没有覆盖屏幕的整个屏幕部分，我觉得很奇怪。下面是我的主页部分的html和CSS代码。

HTML和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;
}

#hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#hero:before {
  content: "";
  background: rgba(0, 0, 0, 0.6);
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
}

#hero .container {
  position: relative;
  padding-top: 74px;
  text-align: center;
}

#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 {
    height: auto;
  }
  #hero h1 {
    font-size: 28px;
    line-height: 36px;
  }
  #hero h2 {
    font-size: 20px;
    line-height: 24px;
  }
}

@media (max-width: 769px) {
  #background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 145%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
  }
  #hero {
    height: auto;
  }
  #hero h1 {
    font-size: 28px;
    line-height: 36px;
  }
  #hero h2 {
    font-size: 20px;
    line-height: 24px;
  }
}

@media (max-width: 360px) {
  #background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 145%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
  }
  #hero {
    height: auto;
  }
  #hero h1 {
    font-size: 28px;
    line-height: 36px;
  }
  #hero h2 {
    font-size: 20px;
    line-height: 24px;
  }
}

<div class="container" data-aos="fade-up">

  <video id="background-video" autoplay loop muted>
    <!--
    <source
      src="assets/img/herovid.mp4" type="video/mp4">
    -->
    <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>

背景视频上带有文本的最小示例：

body{
    padding:0px;
    margin:0px;
    font-family:Arial;
}
  
#container-top{
    width:100%;
    height:100vh;
    position:relative;
    display:block;
    overflow:hidden;
}
    
#background-video {
    position: absolute;
    box-sizing:border-box;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    object-fit: cover;
    object-position: center;
}

#some-text {
    position: absolute;
    padding:30px;
    background:#00000088;
    color:#fff;
    box-sizing:border-box;
    top: 50%;
    left: 50%;
    transform:translateX(-50%) translateY(-50%);
}

#more-text {
 clear:both;
 padding:40px;
}

<div id="container-top">
    <video id="background-video" autoplay loop muted>
        <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
    </video>
    
    <div id="some-text">
        <b>Lorem Ipsum 2</b><hr>
        <p>
          is simply dummy text of the printing and typesetting 
          industry.
        </p>        
    </div>
</div>

<div id="more-text">
    <h1>Lorem Ipsum 2</h1>
    <p>
      is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the.
    </p>        
</div>

视频背景主页不响应不同的屏幕分辨率,CSS媒体查询不工作

1条答案

相关问题

热门标签

最新问答