3

我一直在一个网站上工作，在此处找到，它在我的显示器 (1440 x 900) 上看起来不错，但在超大显示器上显示时看起来非常平淡。我给外箱一个绝对的高度和宽度，这显然是我的问题的原因，但是当图像都是固定的高度和宽度时，我能做些什么来解决这个问题？

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

在较大的显示器上，左右两侧以及外框下方都有很多空白区域。

感谢您的任何帮助！

-埃文

4

1 回答 1

2

您可以使用以下两种方式进行操作：

  1. CSS 3 媒体查询
  2. 流体布局

既然你说你也将支持 IE，CSS 3 媒体查询将无法在 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 最令人兴奋的方面之一。它们将允许我们更改布局以适应不同设备的确切需求，而无需更改内容。

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找到一个工作演示。享受！

于 2012-07-11T16:46:14.740 回答