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

【问题标题】：Size of menu dependent on screen resolution菜单大小取决于屏幕分辨率
【发布时间】：2016-04-22 13:06:08
【问题描述】：

目前我正在和一位朋友一起学习编程，我们希望双方都能制作我们的网站。我们正面临一些前端菜单的问题。我们希望它是一个单页，但在 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;
}

在我的设备上它看起来不错，但在我朋友的具有相同属性的情况下它看起来并不那么好看。有人可以向我们发布一些反馈，我们应该在哪里搜索什么内容以使其响应？用 % 而不是 px 覆盖所有属性应该可以完成这项工作吗？谢谢你的提问：） PS 我们只希望它出现在桌面屏幕上。

【问题讨论】：

首先不是 CPU 设备，而是桌面屏幕。阅读媒体查询或响应式引导。
好的，谢谢，所以我们正在进入一些引导教程来找到它:)
建议tutorialspoint.com/bootstrap 或 w3cschool

标签： html css responsive-design frontend

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

如果不看示例或屏幕截图，很难确定什么是“不那么好看”，但无论如何这可能会有所帮助。

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

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

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

http://getbootstrap.com/

【讨论】：