菜单大小取决于屏幕分辨率 [英] Size of menu dependent on screen resolution

问题描述

我正在与朋友一起学习编程，我们希望两个都能做到我们的网站。我们面临着一些前端菜单的问题。我们希望它成为一个首页，但在MVC中，所以我们可以在不同内容的onepages之间切换。要做一个网页网站，我们遵循本教程： http://1stwebdesigner.com/parallax-scrolling-tutorial /
现在我们在调整菜单时遇到问题。我们希望它看起来是一样的，无论人们观察它使用什么分辨率。下面是我们要修改的.css代码。

i'm learning programming with a friend at the moment and we wanted both to make our sites. We're facing a problem with some Front-End menu. We want it to be a onepage but in MVC so we could swap between those "onepages" with different content. To do the one page website we followed this tutorial: http://1stwebdesigner.com/parallax-scrolling-tutorial/
and now we face a problem with adjusting the menu. We want it to look the same no matter what resolution the person views it use. Here is some code of our .css we want to modify.

 #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我们只想在桌面屏幕上。

At my device it looks good but at my friend's with same properties its not that good looking. Can someone post us some feedback where and WHAT should we search to make it responsive? Does covering all properties with % instead of px should do the job? Thanks for asking :) PS We want it only on desktop screens.

推荐答案

为了更改不同屏幕分辨率的菜单字体大小。希望这个代码可以帮助你解决你的问题。

In order to change the menu font-size for different screen resolution. Hope, this code will help to solved your problem.

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

First specifies the font-size attribute for your menu items. Let's do with example

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

要更正字体大小值，菜单项在一行中，您可以覆盖该规则。例如：

To correct the font-size value that’ll be small enough to keep your menu items in one row, you can override the rule. For example:

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

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

Then, write @media query for each width to adjust the correct size of the font as :

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

这篇关于菜单大小取决于屏幕分辨率的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！