Question

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

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

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

在1366 X 768分辨率页面看起来很棒！ - ＆GT; http://i50.tinypic.com/ac6blc.jpg

在1024 X 768分辨率下有些元素出现问题！ - ＆GT; 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>

Answer 1

随着屏幕分辨率的增加，使用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;
            }
}

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

Answer 2

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

Answer 3

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

想让我的网页分辨率依赖吗？

3 个答案: