屏幕最小化時，頁眉照片（上方導航欄）消失

在正常的窗口大小下，我的網站包含標題照片，在照片上寫有歡迎和旅行建議，並位於標題底部的導航欄。我希望它在手機視圖中看起來一樣，但每次我最小化屏幕和導航欄移動到頁面頂部，其餘的正文內容隨後移動時，寫入和標題照片消失。其他一切正常。我只是試圖找到一種方法來保持移動視圖中的標題照片和它下面的導航欄。謝謝！屏幕最小化時，頁眉照片（上方導航欄）消失

我的HTML代碼：

<style> 
    .brand, 
    .address-bar { 
     text-align: center; 
     background: url("img/photo.jpg") no-repeat center center fixed; 
     background-size: cover; 
     position: relative; 
     top: -10%; 
     left: -10%; 
     right: -10%; 
     min-width: 110%; 
     min-height: -10%; 
     padding: 100px; 
     font-size: 50px; 
     color: black; 
     margin-top:-1%; 
    } 
    ...... 
    @media screen and (min-width:768px) { 
     .brand { 
      display: inherit; 
      margin: 0; 
      text-align: right; 
      text-shadow: 1px 1px 2px rgba(0,0,0,0.5); 
      font-family: "Josefin Slab", "Helvetica Neue", Helvetica, Arial, sans-serif; 
      font-size: 5em; 
      font-weight: 700; 
      line-height: normal; 
      color: #fff; 
     } 

     .address-bar { 
      display: inherit; 
      margin: 0; 
      padding: 0 150px 400px; 
      text-align: right; 
      text-shadow: 1px 1px 2px rgba(0,0,0,0.5); 
      text-transform: uppercase; 
      font-size: 1.25em; 
      font-weight: 400; 
      letter-spacing: 3px; 
      color: #fff; 
     } 
     ...... 
</style> 
..... 
<body> 
    <div class="brand"> Welcome </div> 
    <div class="address-bar"> Travel recommendations </div> 
    <!-- Navigation --> 
    <nav class="navbar navbar-default" role="navigation"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
      ...

來源

2017-02-23 rhodocoder

嘗試使用彈性盒或CSS網格很容易，下面有一個鏈接到我讓你得到一個縮放和響應標題和導航欄的演示，希望這有助於你有一個美好的一天。

有演示：

Scaled header and nav-bar

當然不要忘記到添加到您的<head>此代碼：

<meta name="viewport" content="width=device-width, initial-scale=1">

來源

2017-02-23 21:50:00 Nadim

非常感謝！有效。問題是我沒有頭標籤內的照片類。 – rhodocoder

<meta name="viewport" content="width=device-width, initial-scale=1.0">

嘗試添加該文檔的頂部。它現在應該縮放圖像。你現在不需要在css中使用@mediascreen代碼。

來源

2017-02-23 20:42:21 pheasey

謝謝！我將添加到HTML。 – rhodocoder

從外表看，你的形象不應該消失。但是有些事情你正在做，這可能會導致標題照片看起來不能正確顯示。

我想說，你應該開始在媒體查詢調試。也許嘗試將display:block;添加到您的.brand課程中，並且可能會給它一個設定的高度。我認爲這可能會清除你的一些問題。

也可以嘗試添加視口元到HTML的頭，像這樣：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

這將告訴瀏覽器如何控制網頁的尺寸和比例。

此外，min-height: -10%你對.address-bar類沒有用處，那是不會做任何事的。 div的尺寸不能小於0。

但是，如果您說它全屏幕顯示，請嘗試刪除整個媒體查詢並查看是否仍然有不良結果。如果沒有，那就有你的地方開始。

來源

2017-02-23 20:52:12

謝謝！我把它整理出來了。你是對的，不需要最小高度：-10％。 – rhodocoder

屏幕最小化時，頁眉照片（上方導航欄）消失

回答

相關問題