如何在导航栏中更改此设置,以及如何更改代码以适应任何屏幕?
问题描述:
我有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>
答
你可以用最小的变化这项工作,只要你想在移动设备桌面导航布局。
https://codepen.io/will0220/pen/YrabEm
你想改变导航栏和导航栏的包装是100%的宽度 - 你可以添加一个最大宽度,如果你不希望它超过一个特定的大小。从那里,为更小尺寸的设备添加一个媒体查询(在我的例子中为1000px,但可以更小),并切换到视口单元以获取nav元素的字体大小/填充。这只有当你想要在移动设备上放置完整的桌面导航时 - 最好是寻找可用性的替代移动菜单,但这至少可以使它适合现实。
@media (max-width: 1000px){
#navigation-container li a{
font-size: 3vw;
padding: 5px 1vw
}
}
只是google这些东西:视口标签,媒体查询,响应式设计教程,你应该很好。 –
媒体查询和引导网格视图非常适合响应。 –