Question

我正在使用.bg类，加上一些jquery在jumbotron上创建视差滚动效果。它在大屏幕上按计划工作，但高度不适用于较小的设备。我已添加以下媒体查询，以便在.bg的设备上调整height: 350px到max-width: 768px的大小。但是，在执行此操作时，.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;
  }
...
}

响应式视差jumbotron不使用媒体查询

1 个答案: