響應視差jumbotron與媒體查詢不起作用

Question

我正在使用.bg類，再加上一些jquery在jumbotron上創建視差滾動效果。它在大屏幕上按計劃運行，但高度不適用於較小的設備。我已在以下媒體查詢中將.bg更改爲height: 350px，其設備號爲max-width: 768px。但是，在執行此操作時，.bg元素將固定到該頁面，以便所有其他內容在滾動時疊加，並且視差效果將丟失。

我已經研究過，因此無法找到類似的查詢，所以如果有任何反饋，我們將非常感謝。

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; 
    } 
... 
}