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

Question

我目前正在和一个 friend 一起学习编程，我们都想制作我们的网站。我们遇到了一些前端菜单的问题。我们希望它是一个单页但在 MVC 中，因此我们可以在具有不同内容的那些“单页”之间交换。要制作单页网站，我们遵循了本教程: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;
}

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

Answer 1

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

首先为您的菜单项指定字体大小属性。让我们用例子来做

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

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

.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;
}
}