调整大小时如何为不同的分辨率调整网页的宽度？

Question

上面的代码适用于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>

Answer 1

百分比和媒体查询https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries，它们的行为类似于有条件的行为。

Answer 2

从一开始，您就应该开始使用百分比（％）而不是px。 但这可能还不算太晚。

http://www.entheosweb.com/website_design/advanced_web_design.asp

阅读步骤3。

希望这可以帮助。

Answer 3

您可以使用在移动设备上也可以使用的网格系统，例如http://960.gs/或http://cssgrid.net/ 。