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

【问题标题】：Want to make my web page resolution dependent?想让我的网页分辨率依赖？
【发布时间】：2018-05-02 19:06:23
【问题描述】：

我正在创建一个网站，我在其中创建了单页。页面在 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>

【问题讨论】：

谷歌搜索响应式网页设计

标签： css html screen-resolution

【解决方案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;
            }
}

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

【讨论】：

这适用于我们使用图像作为背景的按钮？
上述媒体查询只是一个示例，您可以将它们与页面上的所有元素（即 div 和表格）一起使用。如果您需要图像来填充 div，您可以设置 div 的 % 大小并使用 'background-image: contains' 将图像保留在 div 内。

【解决方案2】：

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

【讨论】：

我需要为哪个类定义最小宽度？身体？？
@user210111 正文或您的#content div

【解决方案3】：

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

【讨论】：