jquery - 响应式视差超大屏幕不适用于媒体查询

Question

我正在使用 .bg 类，结合一些 jquery 在 jumbotron 上创建视差滚动效果。它在较大的屏幕上按计划工作，但高度不会针对较小的设备进行调整。我已输入以下媒体查询以在具有 max-width: 768px 的设备上将 .bg 的大小调整为 height: 350px。然而，在这样做时，.bg 元素固定在页面上，以便所有其他内容在滚动时覆盖它，并且视差效果丢失。

我已经研究过 SO 并且无法找到类似的查询，所以如果有任何反馈，我们将不胜感激。

HTML:-

    <div class="bg"></div>
    <div class="jumbotron" id="jumbotron_about">
        <div class="container">
            <h1>A brief<br>
            history of me</h1>
            <h5>Read on and learn</h5>
        </div>
    </div>

CSS:

@media (max-width: 768px) {
.bg {
background-size: cover!important;
position: fixed;
width: 100%;
height: 350px!important;
top:0;
left:0;
z-index: -1;
}

#jumbotron_about {
height: 350px!important;
background:transparent;
}
}

Here is a link to my webpage

非常感谢乔恩

Answer 1

查看您的网站，有三个设置高度的属性。在您的媒体查询中，您需要包含 .bg、#jumbotron_about 和 .jumbotron 的高度。

最重要的是，#jumbotron_about 不在您网站 CSS 的媒体查询中，就像在您上面的示例中一样，我认为这就是问题所在。

所以

@media (max-width: 768px) {    
.jumbotron, #jumbotron_about, .bg {
    height: 380px;
  }
...
}