Size of menu dependent on screen resolution

问题

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

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.

回答1:

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

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

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

回答2:

It's a little hard to determine what "not that good looking" is without seeing an example or a screenshot, but this may help anyway.

The biggest tool in making a site responsive is going to be media queries. This allows you to set break points at which you can adjust your styles according to a set of parameters, most often width. Here is some documentation on using media queries:

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

I would also recommend checking out bootstrap if you are not familiar with it. You can dig through the code and see how they implement media queries in addition to other responsive techniques they use. It's a pretty great framework:

http://getbootstrap.com/

来源：https://stackoverflow.com/questions/36794707/size-of-menu-dependent-on-screen-resolution

标签

html

css

responsive-design

frontend