Question

我现在正和朋友一起学习编程，我们想要创建我们的网站。我们在使用某些前端菜单时遇到问题。我们希望它是一个页面，但在MVC中，所以我们可以在那些＆＃34; onepages＆＃34;内容不同。要做单页网站，我们遵循了本教程：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我们只想在桌面屏幕上使用它。

Answer 1

确定什么＆＃34;不那么好看＆＃34;有点难。没有看到示例或屏幕截图，但无论如何这可能会有所帮助。

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

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

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

http://getbootstrap.com/

Answer 2

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

首先指定菜单项的font-size属性。让我们来做例子

.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 个答案: