0

私はウェブサイトを設計しています。私のモニターの解像度は1280 x 1024で、開発には通常Firefoxを使用します。これは、それがどのように見えるかであり、そうあるべきです。これは正しいものです。

ここに画像の説明を入力

ただし、同じモニターのChromeで表示すると、わずかな変化があります。右下隅に注目してください。

ここに画像の説明を入力

画面解像度が異なる別のモニターで表示すると、事態はさらに悪化します。これは仕事中の私の画面で、解像度は1366 x 768です。

Firefoxの場合

ここに画像の説明を入力

Chromeの場合

ここに画像の説明を入力

ご覧のとおり、レイアウトはかなりめちゃくちゃです。以下はコードです。

HTML

<img id="yellowRing" src="images/about_rings/yellow_ring.png" />
<img id="magentaRing" src="images/about_rings/magenta_ring.png" />
<img id="blueRing" src="images/about_rings/blue_ring.png" />

<div id="aboutCaption">
    <p>Our Team</p>
</div>

<div id="team">
    <div class="member"><a data-member="one" href="#"><img src="images/team/one_thumbnail.png" /></a></div>
    <div class="member"><a data-member="two" href="#"><img src="images/team/two_thumbnail.png" /></a></div>
    <div class="member"><a data-member="three" href="#"><img src="images/team/three_thumbnail.png" /></a></div>
    <div class="member"><a data-member="four" href="#"><img src="images/team/four_thumbnail.png" /></a></div>
</div>

CSS

#yellowRing {
    position:absolute;
    left:1200px;
    bottom:-1300px;
    z-index:2;  
}

#magentaRing {
    position:absolute;
    left:1600px;
    bottom:-1100px;
    z-index:3;
}

#blueRing {
    position:absolute;
    left:2160px;
    top:500px;
    z-index:4;
}


#aboutCaption {
    position:absolute;
    left:2430px;
    top:-50px;
    z-index:4;
    line-height:2.2em;
}

#aboutCaption p {
    font-weight:lighter;
    text-align:right;
    color:#FFF;
    font-size:55px;
}

#team {
    position:absolute;
    left:2135px;
    top:90px;
    width:432px;
    height:110px;
    z-index:4;
}

.member {
    position:relative;
    height:95px;
    width:95px;
    margin:8px 8px 8px 0px;
    z-index:5;
    display:inline-block;
}

.member:nth-child(1) {
    margin-left:8px;    
}

.member img {
    height:95px;
    width:95px; 
}

このウェブサイトは横スクロールのみです。私の質問は、なぜこれが起こっているのですか？また、画面サイズや解像度に関係なく、レイアウトを一貫させるにはどうすればよいですか? または、レスポンシブ デザインに取り掛かり、ベンチマークごとに複数の CSS ファイルを含める必要がありますか?

ありがとうございました。

4

1 に答える 1

0

すべてのプラットフォーム/ブラウザ/などをカバーするには、かさばるフレームワークを使用する必要があります。または、単純に保つ場合は、さまざまなレイアウト次元をカバーするためにいくつかの @media ルールを使用します。その基本は、 W3 メディア タイプで見つけることができます。

于 2013-01-22T15:41:29.503 に答える