響應Navbar與大圖像

我想做一個響應式導航欄，到目前爲止，我已經實現了唯一剩下的事情，我想要做的是修復導航欄如何在較小的窗口中查找。響應Navbar與大圖像

正如你可以看到small resolution當你得到較小的分辨率時，導航欄與圖像重疊。

而當你在桌面上的決議，它看起來像這個enter link description here右側的導航欄看起來不太對。

如果任何人可以指出我的一些資源，這將有助於我解決這個問題，或者如果任何人都可以解釋我需要改變這將是偉大的。

也有人可以告訴我，我可以如何鏈接我的代碼，以便它更容易讓你們看到我做了什麼。

謝謝

來源

2017-09-10 John Alex

以下是一些可用於您的徽標的技巧。

從圖像標記中刪除任何寬度或高度屬性，然後根據視口寬度對其進行縮放。例如，

HTML

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

CSS

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

，你可以在你的頭添加多個圖像標籤，一個用於臺式機，一個用於移動。根據視口寬度，使用不同的類，然後使用CSS媒體查詢一次隱藏或顯示一個徽標。

HTML

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

CSS

.logo{ 
    display: none; 
} 


.logo.mobile{ 
    display:block; 
} 


@media (min-width: 768px) { 

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

}

我最喜歡的方法之一是使用背景圖片，而不是使用圖片代碼。如果需要，這可以很容易地疊加文本，並且在移動設備上效率很高，因爲您可以使用媒體查詢在不同的視口定義不同的圖像，只需下載一個。

我希望這有助於！

來源

2017-09-10 13:07:51

響應Navbar與大圖像

回答

相關問題