画面が最小化されると、ヘッダー写真（上のナビゲーションバーの上）が消えます

通常のウィンドウサイズでは、私のウェブサイトにヘッダー写真が含まれ、ウェルカムとトラベル推奨が写真上に、ヘッダーの下に表示されます。私はそれが携帯電話のビューで同じように見えるようにしたいが、私は画面を最小化するたびに、書き込みとヘッダーの写真が消え、ページの上にnavbarが移動し、本文の残りの部分が続きます。他のすべてはうまく動作します。私はちょうどモバイルビューとその下のnavbarのヘッダー写真を保持する方法を見つけることを試みています。ありがとう！画面が最小化されると、ヘッダー写真（上のナビゲーションバーの上）が消えます

私の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

物の外見では、あなたのイメージは消えてはいけません。しかし、ヘッダー写真が正しく表示されないように見える原因となることがいくつかあります。

メディアクエリでデバッグを開始する必要があります。たぶん.brandクラスにdisplay:block;を追加して、それに高さを設定してみてください。私はあなたの問題のいくつかを解決するかもしれないと思います。

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

これは、ページの大きさとスケーリングを制御する方法ブラウザを教えてくれます：

また、このように、あなたのhtml頭にビューポートのメタを追加してみてください。

また、そのmin-height: -10%は、あなたの.address-barクラスにありますが、何もしません。 divのサイズは0より小さくすることはできません。

しかし、フルスクリーンで動作すると言えば、メディアクエリ全体を削除して、依然として望ましくない結果が得られるかどうかを確認してください。そうでない場合は、あなたの場所を開始する必要があります。

出典

2017-02-23 20:52:12

ありがとう！私はそれを整理した。あなたは正しいです、最小高さの必要はありません：-10％。 – rhodocoder

画面が最小化されると、ヘッダー写真（上のナビゲーションバーの上）が消えます

答えて

関連する問題