如何在导航栏中更改此设置，以及如何更改代码以适应任何屏幕？

我有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

如何在导航栏中更改此设置，以及如何更改代码以适应任何屏幕？

回答

相关问题