为不同分辨率的显示器优化网页

Question

为不同分辨率的显示器优化网页

cssresolutionmonitor

3

我一直在做一个网站，发现这里，在我的显示器上（1440 x 900）看起来很好，但在超大的显示器上看起来非常简单。我给外框设置了绝对高度和宽度，这显然是我的问题所在，但当所有图像都具有固定的高度和宽度时，我该怎么办来解决这个问题？

我在某个地方读到可以在页面加载时检查显示器尺寸，有人推荐这样做吗？

在较大的显示器上，左右两侧和外框下方有很多空白空间。

谢谢您的任何帮助！

-Evan

- user725913

你的目标浏览器是哪些？你可以使用 CSS 3 媒体查询。 :) 另外，你可以考虑使用流式布局而不是固定布局！ - Praveen Kumar Purushothaman

IE和Chrome是人们访问我的网站使用最多的两种浏览器 - 所以我会推荐这两种。 - user725913

啊！！！IE！！！低于IE 9的浏览器不支持媒体查询，好的，让我回答你的问题！ :) - Praveen Kumar Purushothaman

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Praveen Kumar Purushothaman · Accepted Answer

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

CSS 3 媒体查询
流式布局

由于您说您还要支持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媒体查询布局示例中找到一个可运行的演示。尽情享受吧！