菜单大小取决于屏幕分辨率

Question

我目前正在和一个朋友一起学习编程，我们都想制作我们的网站。我们遇到了一些前端菜单的问题。我们希望它是一个单页但在 MVC 中，因此我们可以在具有不同内容的 "onepages" 之间交换。为了制作单页网站，我们遵循了本教程：http://1stwebdesigner.com/parallax-scrolling-tutorial/
现在我们面临调整菜单的问题。我们希望无论人们使用何种分辨率观看它，它看起来都一样。这是我们要修改的 .css 的一些代码。

 #header {
    width: 18%;
    background: url('img/header-bg.png');
    height: 100%;
    position :fixed;
    margin-left: 1%;
    text-align: center;
}
#nav { width: 200px; float: none; margin-top: 20px; }

#nav ul{
list-style: none;
display: block;
margin: 0 auto;
list-style: none;
}
#nav li{
margin-top: 100px;
float:none;
}

在我的设备上它看起来不错，但在我朋友的具有相同属性的设备上它看起来不太好看。有人可以 post 向我们提供一些反馈吗？我们应该搜索哪些内容以使其具有响应性？用 % 而不是 px 覆盖所有属性应该完成这项工作吗？感谢您的提问 :) PS 我们只希望它出现在桌面屏幕上。

Answer 1

在没有看到示例或屏幕截图的情况下很难确定 "not that good looking" 是什么，但这无论如何都可能有所帮助。

使网站具有响应能力的最大工具是媒体查询。这允许您设置断点，您可以根据一组参数（通常是宽度）调整样式。这里有一些关于使用媒体查询的文档：

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

如果您不熟悉，我还建议您查看 bootstrap。您可以深入研究代码，看看除了他们使用的其他响应技术之外，他们是如何实现媒体查询的。这是一个非常棒的框架：

http://getbootstrap.com/

Answer 2

为了改变不同屏幕分辨率的菜单字体大小。希望这段代码能帮助解决您的问题。

首先为您的菜单项指定字体大小属性。举个例子

.sf-menu > li > a {
font: bold 19px/22px Open Sans;
}

要更正字体大小值，使其小到足以让您的菜单项保持在一行中，您可以覆盖该规则。例如：

.sf-menu > li > a {
font-size: 16px !important;
}

然后，为每个宽度编写@media 查询以调整字体的正确大小为：

@media only screen and (min-width: 768px) {
.sf-menu > li > a {
font-size: 11px !important;
}
}         
@media only screen and (min-width: 980px) {
.sf-menu > li > a {
font-size: 14px !important;
}
}         
@media only screen and (min-width: 1280px) {
.sf-menu > li > a {
font-size: 16px !important;
}
}

菜单大小取决于屏幕分辨率

Size of menu dependent on screen resolution

html

css

frontend

responsive-design