如何在導航欄中更改此設置，以及如何更改代碼以適應任何屏幕？

我有2個大問題，如果你能回答謝謝，我會感謝你（我正在編程）：1）我不知道如何改變我的文本，以便它可以適應每個屏幕（iphone ipad筆記本電腦。 ..）2）如何將英語，法語......的元素移到右側（我的語言），以便它保持在同一水平線上。感謝如何在導航欄中更改此設置，以及如何更改代碼以適應任何屏幕？

.code { 
 
    overflow: auto; 
 
} 
 

 
.logo { 
 
    float: left; 
 
} 
 
/* ~~ Top Navigation Bar ~~ */ 
 

 
#navigation-container { 
 
    width: 1200px; 
 
    margin: 0 auto; 
 
    height: 70px; 
 
    position: fixed; 
 
    background-color: white; 
 
    opacity: 0.8; 
 
    padding-bottom: 10px; 
 
    padding-top: 0px; 
 
    margin-top: 0px; 
 
} 
 

 
.navigation-bar { 
 
    height: 70px; 
 
    width: 111%; 
 
} 
 

 

 

 
#navigation-container img { 
 
    float: left; 
 
    height: 111%; 
 
} 
 

 
#navigation-container ul { 
 
    padding: auto; 
 
    margin: auto; 
 
    text-align: center; 
 
    display: block; 
 
} 
 

 
#navigation-container li { 
 
    list-style-type: none; 
 
    padding: 0px; 
 
    height: 24px; 
 
    margin-top: 4px; 
 
    margin-bottom: 4px; 
 
    display: inline; 
 
} 
 

 
#navigation-container li a { 
 
    color: black; 
 
    font-size: 16px; 
 
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
 
    text-decoration: none; 
 
    line-height: 70px; 
 
    padding: 5px 15px; 
 
    opacity: 0.7; 
 
} 
 

 
#menu { 
 
    float: center; 
 
} 
 

 
a:hover { 
 
\t background-color: #0099cc; 
 
} 
 
hr { 
 
\t color: darkgray; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Welcome </title> 
 
\t <link rel="stylesheet" href="text.css" type="text/css"> 
 
\t <meta charset="UTF-8"> 
 
</head> 
 
<body> 
 
    <div class="navigation-bar"> 
 

 

 
    <div id="navigation-container"> 
 

 
     <img src="Bildschirmfoto%202017-10-08%20um%2012.01.55.png"> 
 

 
     <ul> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">Who are we ?</a></li> 
 
     <li><a href="#">Newest</a></li> 
 
     <li><a href="#">The Best</a></li> 
 
     <li><a href="#">English</a></li> 
 
     <li><a href="#">Deutsch</a></li> 
 
     <li><a href="#">Français</a></li> 
 
     
 
     </ul> 
 
     
 
    
 
     
 
    <hr > 
 
    </div> 
 
    </div> 
 
    
 
</body> 
 
</html>

來源

2017-10-09 Ted Staggs

只是google這些東西：視口標籤，媒體查詢，響應式設計教程，你應該很好。 –

媒體查詢和引導網格視圖非常適合響應。 –

你可以用最小的變化這項工作，只要你想在移動設備桌面導航佈局。

https://codepen.io/will0220/pen/YrabEm

你想改變導航欄和導航欄的包裝是100％的寬度 - 你可以添加一個最大寬度，如果你不希望它超過一個特定的大小。從那裏，爲更小尺寸的設備添加一個媒體查詢（在我的例子中爲1000px，但可以更小），並切換到視口單元以獲取nav元素的字體大小/填充。這隻有當你想要在移動設備上放置完整的桌面導航時 - 最好是尋找可用性的替代移動菜單，但這至少可以使它適合現實。

@media (max-width: 1000px){ 
    #navigation-container li a{ 
    font-size: 3vw; 
    padding: 5px 1vw 
    } 
}

來源

2017-10-09 15:46:30 will

如何在導航欄中更改此設置，以及如何更改代碼以適應任何屏幕？

回答

相關問題