0

常に比率を維持し、ユーザーの画面サイズに適応する Web サイトを構築しようとしていますが、それを達成できません。

http://jsfiddle.net/WxNrh/のような単純な固定幅/高さのフレームを構築することから始め、それをいじり始めましたが、いつも行き詰まります。

私が達成したいのは、最大幅が 800px であり、ユーザーの画面解像度 (またはブラウザー ウィンドウをどれだけ縮小するか) に応じて、Web サイトはそれに応じて縮小されますが、常に幅/高さの比率を維持することです。

ここに私の固定ウェブサイトがあります：

<div id="wrapper">
<div id="header">Header</div>

<div id="content">
    <div id="left">Left</div>
    <div id="right">Right</div>
</div>

<div id="footer">Footer</div>

そしてCSS：

#wrapper{width: 800px; height: 400px;}
#header{background-color: red; width: 800px; height: 100px;}
#left{float: left; background-color: yellow; width: 200px; height: 200px;}
#right{float: left; background-color: orange; width: 600px; height: 200px;}
#footer{clear: both; background-color: blue; width: 800px; height: 100px;}

私は本当に助けていただければ幸いです！:)

編集：

このcssで目的の効果が得られました：

#wrapper{max-width: 800px;}
#header{background-color: red; width: 100%; padding-top: 12.50%;}
#left{float: left; background-color: yellow; width: 25%; padding-top: 25.00%;}
#right{float: left; background-color: orange; width: 75%; padding-top: 25.00%;}
#footer{clear: both; background-color: blue; width: 100%; padding-top: 12.50%;}

しかし、問題は、パディングを使用して div コンテンツを強制的に下げることで機能することです。つまり、コンテンツが本来あるべき場所にないため、あまり使用できません。

4

3 に答える 3

3

出来上がり。http://jsfiddle.net/rudiedirkx/WxNrh/2/show/

padding救助へ。ただし、コンテンツがボックスに収まらない可能性があるため、あまり役に立ちません...

魔法は相対的なパディングと絶対的な位置付けです:

.outer {
    height: 0;
    position: relative;
    /* padding-bottom: 25%; in the actual div like #header */
}
.inner {
    position: absolute;
    width: 100%;
    height: 100%;
}

そして、ラッパー div の全負荷 =( (.innerおよび.outer):

<div class="outer" id="wrapper">
    <div class="inner">
        <div class="outer" id="header">
            <div class="inner">Header</div>
        </div>
        <div class="outer" id="content">
            <div class="inner">
                <div class="outer" id="left">
                    <div class="inner">Left</div>
                </div>
                <div class="outer" id="right">
                    <div class="inner">Right</div>
                </div>
            </div>
        </div>
        <div class="outer" id="footer">
            <div class="inner">Footer</div>
        </div>
    </div>
</div>

これが非常に役立つケースが 1 つあります。そのアスペクト比を維持する必要がある場合があります: レスポンシブ ビデオです。コンテンツ ボックスとページ全体の場合: あまり役に立ちません。

しかし、あなたは尋ねました！

于 2013-03-23T15:04:23.673 に答える
1

イメージとドライブの比率を使用する

比率を設定する最善の方法は、多くの場合img、希望する比率のセットを使用し、それによってコンテナーのサイズを制御することです。

元のコードを変更するフィドルの例を次に示します。

HTML

<div id="wrapper">
    <img class="ratioDriver" src="http://dummyimage.com/200x100/000/fff.gif&text=2w:1h+Ratio" />
    <div id="header">Header</div>

    <div id="content">
        <div id="left">Left</div>
        <div id="right">Right</div>
    </div>

    <div id="footer">Footer</div>
</div>

CSS

body {
    margin: 0;
    padding: 0;
}

#wrapper{
    width: 100%; 
    max-width: 800px; 
    position: relative;
    margin: 0 auto;
}

.ratioDriver {
   width: 100%;   
   display: block; 
}

#header{
    background-color: red; 
    width: 100%; 
    height: 25%; /* 100 / 400 = .25 = 25% */
    position: absolute;
    top: 0;
    left: 0;
}
#left{
    position: absolute;
    top: 25%;
    left: 0;
    background-color: yellow; 
    width: 25%; /* 200 / 800 = .25 = 25% */
    height: 50%; /* 200 / 400 = .5 = 50% */
}
#right{
    position: absolute;
    top: 25%;
    left: 25%;
    background-color: orange; 
    width: 75%; 
    height: 50%;
}
#footer{
    position: absolute;
    top: 75%;
    left: 0;
    background-color: blue; 
    width: 100%; 
    height: 25%;
}

コンテンツを処理する 2 つの方法

コンテンツをどのように処理するかを決定する必要があります。

オプション1

コンポーネントを使用して、オーバーフロー時に個別のスクロール バーを表示しますかoverflow: auto? これは、コンテンツのサイズが不明な場合に最適なオプションです。

オプション 2

それを試してスケーリングしますか。これには、要因を解決するための固定サイズのコンテンツが必要です。これは実際には最新のブラウザーでのみ機能します(Firefox 19 と IE9 ではうまく機能しますが、この記事の執筆時点では Chrome 25 は正しく機能していません)。このフィドルは、上記の css にこれらの追加を使用し、html にいくつかのコンテンツを追加して、大まかにそれを実現します。

html {
    font-size: 1vw;
}
 #header{
    font-size: 3rem;
}
#left{
    font-size: .99rem;
}
#right{
    font-size: 1.25rem;
}
#footer{
    font-size: 1.3rem;
}
于 2013-03-23T16:11:33.220 に答える
1

次のようなことを試してください：

#wrapper{width: 800px; height: 400px;}
#header{background-color: red; width: 100%; height: 25%;}
#left{float: left; background-color: yellow; width: 25%; height: 25%;}
#right{float: left; background-color: orange; width: 75%; height: 25%;}
#footer{clear: both; background-color: blue; width: 100%; height: 25%;}

パーセンテージを使用すると、 では機能しない場合がありfloat: left;ます。それがどうなるか見てください。max-width失敗した場合は、 andmax-heightまたはmin-widthandを使用して試すことができますmin-height。

于 2013-03-23T14:52:44.013 に答える