以上代码适用于1280px值，因为我已经相应地使用了。但我需要它应该适用于所有决议。我需要知道需要在哪些方面进行实际更改。有什么建议吗？
<!-- CSS for header: -->
html,body{
margin:0;
padding:5;
font-size:14px;
font-family:"Trebuchet MS", "Lucida Sans Unicode", "Lucida Sans", Verdana;
background-color:#ffffff; /* #F2FBFD;*/
ovewrflow:hidden;
height: 100%
}
.clear
{
clear:both;
}
#wrapper
{
height:100%;
width:1280px;/*controls width of division*/
/* overflow-x:hidden;
overflow-y:hidden; */
}
.header {
width:1280px;
height:50px;
margin:0px auto 10px;
padding:1px;
border-top-style:outset;
border-top:3px; /* #1c5a80; */
font-size:30px;
font-weight: bold;
}
<!-- CSS for Menu: -->
ul.Menu ul{display:none;}
ul.Menu li:hover>ul{display:block;}
ul.Menu ul{position: absolute;left:-1px;top:98%;}
ul.Menu ul ul{position: absolute;left:98%;top:-2px;}
ul.Menu,ul.Menu ul {
margin:0px;
list-style:none;
padding:0px 2px 2px 0px;
background-color:#ffffff;
background-repeat:repeat;
border:0px solid #AAAAAA;
width:1280px; /*Controls width of menu*/
}
ul.Menu table {border-collapse:collapse}ul.Menu {
display:block;
zoom:1;
float: left;
}
ul.Menu ul{
width:180px; /*Controlling width of submenu*/
}
ul.Menu li{
display:block;
margin:1px 0px 0px 0px;
font-size:0px;
}
ul.Menu a:active, ul.Menu a:focus {
outline-style:none;
}
ul.Menu a, ul.Menu li.dis a:hover, ul.Menu li.sep a:hover {
display:block;
vertical-align:middle;
background-color:#8E8E8E; /*#1c5a80;*/
border-width:0px;
border-color:#1c5a80;
border-style:solid;
text-align:left;
text-decoration:none;
padding:8px 27px;
_padding-left:0;
font:normal 12px Verdana;
color: #ffffff;
text-decoration:none;
cursor:default;
}
ul.Menu span{
overflow:hidden;
}
ul.Menu li {
float:left;
}
ul.Menu ul li {
margin-left:2px;
/*width:200px; ----for controlling subMenu width*/
float:none;
}
ul.Menu ul a {
text-align:left;
padding-left: 5px;
}
ul.Menu li.sep{
text-align:center;
padding:0px;
line-height:0px;
height:100%;
}
ul.Menu li.sep span{
float:none; padding-right:0;
width:5;
height:16;
display:inline-block;
background-color:#AAAAAA; background-image:none;}
ul.Menu ul li.sep span{
width:80%;
height:3;
}
ul.Menu li:hover{
position:relative;
}
ul.Menu li:hover>a{
background-color:#696969;
border-color:#665500;
border-style:solid;
font:normal 12px Verdana;
color: #ffffff;
text-decoration:none;
}
ul.Menu li a:hover{
position:relative;
background-color:#696969;
border-color:#665500;
border-style:solid;
font:normal 12px Verdana;
color: #ffffff;
text-decoration:none;
}
ul.Menu li.dis a {
color: #AAAAAA !important;
}
ul.Menu img {border: none;float:left;_float:none;margin-right:4px;width:16px;
height:16px;
}
ul.Menu ul img {width:16px;
height:16px;
}
ul.Menu img.over{display:none}
ul.Menu li.dis a:hover img.over{display:none !important}
ul.Menu li.dis a:hover img.def {display:inline !important}
ul.Menu li:hover > a img.def {display:none}
ul.Menu li:hover > a img.over {display:inline}
ul.Menu a:hover img.over,ul.Menu a:hover ul img.def,ul.Menu a:hover a:hover ul img.def,ul.Menu a:hover a:hover a:hover ul img.def,ul.Menu a:hover a:hover img.over,ul.Menu a:hover a:hover a:hover img.over,ul.Menu a:hover a:hover a:hover a:hover img.over{display:inline}
ul.Menu a:hover img.def,ul.Menu a:hover ul img.over,ul.Menu a:hover a:hover ul img.over,ul.Menu a:hover a:hover a:hover ul img.over,ul.Menu a:hover a:hover img.def,ul.Menu a:hover a:hover a:hover img.def,ul.Menu a:hover a:hover a:hover a:hover img.def{display:none}
ul.Menu a:hover ul,ul.Menu a:hover a:hover ul,ul.Menu a:hover a:hover a:hover ul{display:block}
ul.Menu a:hover ul ul,ul.Menu a:hover a:hover ul ul{display:none}
ul.Menu span{
display:block;
background-image:url(assets/images/arrv_anim_1.gif);
background-position:right center;
background-repeat: no-repeat;
padding-right:11px;}
ul.Menu li:hover>a>span{ background-image:url(./assets/images/arrv_anim_1o.gif);
}
ul.Menu a:hover span{ _background-image:url(assets/images/arrv_anim_1o.gif)}
ul.Menu ul span,ul.Menu a:hover table span{background-image:url(assets/images/arr_double_1.gif)}
ul.Menu ul li:hover > a span{ background-image:url(assets/images/arr_double_1o.gif);}
ul.Menu table a:hover span,ul.Menu table a:hover a:hover span,ul.Menu table a:hover a:hover a:hover span{background-image:url(./images/arr_double_1o.gif)}
ul.Menu table a:hover table span,ul.Menu table a:hover a:hover table span{background-image:url(assets/images/arr_double_1.gif)}
ul.Menu ul ul.left{left:-180px;}
<!-- The div section where i am including header.menu,body and footer pages: -->
<div id="wrapper">
<tiles:insertAttribute name="header" />
<tiles:insertAttribute name="menu" />
<div id="content" style="height:80%;">
<tiles:insertAttribute name="body" />
</div>
<div class="clear"></div>
<div id="footer">
<tiles:insertAttribute name="footer" />
</div>
</div>
答案 0 :(得分：0)
从一开始你应该开始使用百分比（％）而不是px。但这可能不会太晚。
http://www.entheosweb.com/website_design/advanced_web_design.asp
阅读第3步。
希望这有帮助。
答案 1 :(得分：0)
您可以使用http://960.gs/或http://cssgrid.net/等网格系统，该系统也适用于移动设备。
答案 2 :(得分：0)
百分比和媒体查询 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries 他们的行为类似于条件。