大きな画像のあるレスポンスNavbar

Question

レスポンシブなナビゲーションバーを作ろうとしていますが、これまでに達成した唯一のことは、ナビバーが小さなウィンドウでどのように見えるかを修正することです。

small resolutionと表示されているように、解像度が小さくなるとナビバーが画像に重なります。

デスクトップ解像度では、enter link description hereのように見えますが、右側のナビゲーションバーが正しく表示されません。

誰かが私にこれを解決するのに役立つリソースや、誰かが私が変える必要があることを説明できるかどうかを教えてくれる人があれば、それは素晴らしいだろう。

また、どのように私のコードをリンクすることができますので、あなたの人が私が何をしたのかを見やすくすることができます。

ありがとうございました

Answer 1

ここに、あなたのロゴに使用できるいくつかのテクニックがあります。

• 画像タグから任意の幅または高さの属性を削除し、ビューポートの幅に基づいて拡大縮小します。例えば

HTML

<div class="header"> <img src="logo.jpg" class = "logo"> </div> 

CSS

.logo{ 
    width:50vw; 
    max-width:500px; 
} 

• あなたは、あなたのヘッダーにデスクトップ用とモバイル用1つ以上のイメージタグを追加することができます。それぞれに異なるクラスを使用し、CSSメディアクエリを使用して、ビューポートの幅に基づいて一度に1つのロゴを非表示または表示します。

HTML私のお気に入りの技法の

.logo{ 
    display: none; 
} 


.logo.mobile{ 
    display:block; 
} 


@media (min-width: 768px) { 

    .logo.mobile{ 
     display:none; 
    } 
    .logo.desktop{ 
     display:block; 
    } 

} 

• 1は、イメージタグを使用するのではなく、背景画像を使用することです

  <div class="header"><img src="logo-desktop.jpg" class = "logo desktop"> <img src="logo-mobile.jpg" class = "logo mobile"> </div> 
  

  CSS。これにより、必要に応じてテキストを簡単に重ね合わせることができ、さまざまなビューポートで異なる画像を定義するためにメディアクエリを使用でき、1つだけがダウンロードされるため、モバイル上で効率的です。

私はこれが助けてくれることを願っています！