Question

我一直在网站上工作，找到了here，它在我的显示器上看起来很好（1440 x 900）但是在超大显示器上显示它看起来非常简单。我给外框一个绝对的高度和宽度，这显然是我的问题的原因，但是当图像都是固定的高度和宽度时，我该怎么做才能解决这个问题？

我在某处读到我可以检查显示器在页面加载时的尺寸 - 有人会推荐这个吗？

在较大的显示器上，左侧和右侧有很多空白区域，也位于外盒下方。

谢谢你的帮助！

-Evan

Answer 1

您可以通过两种方式实现：

CSS 3媒体查询
流体布局

既然你说过你也会支持IE，那么CSS 3 Media查询将无法在IE 9下工作，所以让我们使用流畅的布局。为此，你可以做一些事情：

CSS更改

#full-height-template-container {width: 1225px;}
#navigation-menu-container {width: 149px;}
#static-frontpage-padding {width: 855px;}

Replace it to:
#full-height-template-container {width: 90%;}
#navigation-menu-container {width: 20%;}
#static-frontpage-padding {width: 80%;}

可能需要进行一些调整。

CSS 3媒体查询

媒体查询是当今CSS最激动人心的方面之一。它们将允许我们更改布局以满足不同设备的确切需求 - 而无需更改内容。

示例＆amp; CSS 3媒体查询演示

HTML标记

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Media query Resolution Dependent Layout</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" href="stylesheets/master.css" />
</head>
<body>
<div id="container">
    <h1>
        Site name
    </h1>
    <div id="nav">
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
        </ul>
    </div>
    <div id="content">
        <h2>
            Main heading here
        </h2>
        <p>
            <img class="feature-image" src="fern.jpg" alt="fern" />Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
        </p>
    </div>
    <div id="extras">
        <h3>
            Related info
        </h3>
        <p>
            Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
    </div>
</div>
</body>
</html>

CSS代码

/* ----------------------------
simple reset
---------------------------- */

html, body, ul, ol, li, form, fieldset, legend
{
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6, p { margin-top: 0; }
fieldset,img { border: 0; }
legend { color: #000; }
li { list-style: none; }
sup { vertical-align: text-top; }
sub { vertical-align: text-bottom; }

table
{
    border-collapse: collapse;
    border-spacing: 0;
}

caption, th, td
{
    text-align: left;
    vertical-align: top;
    font-weight: normal;
}

input, textarea, select
{
    font-size: 110%;
    line-height: 1.1;
}

abbr, acronym
{
    border-bottom: .1em dotted;
    cursor: help;
}

body
{
    margin: 20px;
    color: #000;
    background: #fff;
    font: 90%/1.3 "DejaVu Sans", "URW Gothic L", "Helvetica Neue", Helvetica, Arial, "Microsoft Sans Serif", sans-serif;
}

#container
{
    float: left;
    width: 1000px;
    background: #bbb;
}

#nav
{
    float: left;
    width: 200px;
    background: lime;
}

#content
{
    float: left;
    width: 550px;
    margin: 0 0 0 25px;
    background: yellow;
}

#extras
{
    float: right;
    width: 200px;
    background: gray;
}

.feature-image
{
    float: right;
    margin: 0 0 10px 10px;
}

@media screen and (max-width:999px)
{
    #container { width: 800px; }

    #extras
    {
        clear: left;
        float: none;
        margin: 0 0 0 225px;
        width: 550px;
    }
}

@media screen and (max-width:480px)
{
    #container { width: 400px; }

    #nav
    {
        float: none;
        width: auto;
    }

    #content
    {
        float: none;
        width: auto;
        margin: 0;
    }

    #extras
    {
        float: none;
        width: auto;
        margin: 0;
    }

    .feature-image { display: none; }
}

<强>演示

您可以在CSS3 Media query layout example找到有效的演示。享受！

优化不同分辨率监视器的网页

1 个答案:

CSS更改

CSS 3媒体查询

示例＆amp; CSS 3媒体查询演示