0

我正在创建一个网站，我在其中创建了单页。页面以 1366 X 768 屏幕分辨率完美显示。

但是，当我以 1024 X 768 分辨率打开同一页面时，按钮和一些文本会下降。

我想以某种方式编写 CSS，以便它在两种分辨率下都可以调整或正常工作。下面的屏幕截图显示了我的问题。

在 1366 X 768 分辨率页面看起来完美！-> http://i50.tinypic.com/ac6blc.jpg

在 1024 X 768 分辨率下某些元素会下降！！！-> http://i50.tinypic.com/2vxnjva.png

有人可以查看我的代码并建议我进行更改以使页面在两种分辨率下都正确显示。

非常感谢。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <style type="text/css">
            /*=======Global Styles==========*/
            body {
                font-family:Geordia, serif;
                margin:0;
                padding:0;
            }
            a {
                color:#3E97FB;
            }
            /*==============Container=========*/
            div#container {
                position:relative;
                width:100%;
            }
            #header {
                position:absolute;
                top:5px;
                width:100%;
                background:#FFFFFF;
            }
            /*========Header 1=========*/
            #header1 {
                position:absolute;
                background:url(images/images/headerbg.png) repeat-x;
                width:100%;
                height:111px;
                left: 0px;
                top: 96px;
            }
            #header1 #form {
                float:left;
                margin-left:8%;
                margin-top:8px;
                height:70px;
                width:665px;
            }
            #form .email {
                float:left;
                margin-right:190px;
                font-family:Arial;
                font-size:12px;
                font-weight:bold;
                color:#FFF;
            }
            #form .password {
                float:left;
                margin-right:2%;
                font-family:Arial;
                font-size:12px;
                font-weight:bold;
                color:#FFF;
            }
            .clear {
                clear:both;
            }
            #form .input {
                float:left;
                width:200px;
                padding:7px 7px;
                margin-right:5px;
                width:200px;
                border-bottom: 1px double #171717;
                border-top: 1px double #171717;
                border-left:1px double #333333;
                border-right:1px double #333333;
            }
            #header1 .seprator {
                float:left;
                margin-left:30px;
                background:url(images/images/line.png);
                width:2px;
                height:72px;
                margin-top:15px;
            }
            #header1 .register {
                float:left;
                margin-left:6%;
                margin-top:8px;
                width:280px;
                height:70px;
            }
            .register .noac {
                color:#FFF;
                font-family:"Trebuchet MS";
                font-weight:bold;
                text-align:center;
            }
            .loginbtn {
                float:left;
                display: inline-block;
                width:186px;
                height:40px;
            }
            .advertiserbtn {
                display: inline-block;
                margin:10px;
            }
            .publisherbtn {
                display: inline-block;
                margin:10px;
            }
        </style>
    </head>
    <body>
        <div id="content">
            <div id="header-line"></div>
            <div id="header"></div>
            <!--End header-->
            <div id="header1">
                <div id="form">
                    <div class="email">Email:</div>
                    <div class="password">Password:</div>
                    <div class="clear"></div>
                    <input type="text" class="input" />
                    <input type="text" class="input" />
                    <input type="button" class="loginbtn" value="Login" />
                    <div class="clear"></div>
                </div>
                <!--From Div End -->
                <div class="seprator"></div>
                <div class="register">
                    <div class="noac">Don't have an account yet!</div>
                    <input type="button" class="advertiserbtn"
                    value="Free Register" />
                    <input type="button" class="publisherbtn" value="Premium Registration"
                    />
                </div>
            </div>
            <!--End header1-->
            <div id="footer"></div>
        </div>
        <!--End footer-->
        </div>
        <!--End Content Div-->
    </body>
</html>
4

3 回答 3

3

随着屏幕分辨率的增加，使用 CSS 媒体查询来改变元素的大小。这可以多次完成，甚至允许您的元素重新调整大小和重新排序以适应移动/平板电脑/笔记本电脑/桌面屏幕分辨率。这是一个例子：

@media screen and (min-width:1024px) {
   .loginbtn {
                float: left;
                display: inline;
                width: 156px;
                height: 40px;
            }
}
@media screen and (min-width:1366px) {
   .loginbtn {
                width: 186px;
            }
}

采用移动优先方法，首先声明您的样式为最小宽度。在断点处更改宽度。

于 2013-02-04T09:37:51.753 回答
0

我认为您想要的是页面不会小于特定值。实现这一点的最简单方法是为您提供整个页面一个min-width. 如果窗口变小，将出现一个水平滚动条。

于 2013-02-04T09:46:28.843 回答
-3

您应该尝试将尺寸指定为百分比，而不是所有 px。

于 2013-02-04T09:30:41.193 回答