3

ここにあるサイトで作業しており、モニター (1440 x 900) では問題なく表示されますが、特大のモニターに表示すると非常に単純に見えます。外側のボックスに絶対的な高さと幅を指定しましたが、これが明らかに私の問題の理由ですが、画像がすべて固定の高さと幅である場合、この問題を解決するにはどうすればよいですか?

私はどこかで、モニターがページの読み込み時にどのようなサイズであるかを確認できることを読みました - 誰かがこれを勧めますか?

大きなモニターでは、左右と外箱の下に多くの空白スペースがあります。

助けてくれてありがとう！

-エヴァン

4

1 に答える 1

2

次の 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 の最もエキサイティングな側面の 1 つです。コンテンツを変更することなく、さまざまなデバイスの正確なニーズに合わせてレイアウトを変更できます。

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 に答える