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

我正在学习与朋友编程此刻，我们希望这两个使我们的网站。我们正面临一些前端菜单的问题。我们希望它是一个单页，但在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我们只在桌面屏幕上才需要它。

来源

2016-04-22 Kacper Werema

第一其不是CPU的设备，但它的桌面画面。阅读有关媒体查询或引导的响应。 –

好的，谢谢，所以我们正在进入一些引导教程找到它:) –

建议http://www.tutorialspoint.com/bootstrap/或w3cschool –

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

首先指定菜单项的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; 
} 
}

来源

2016-04-22 13:25:33