0

我正在设计一个网站。我的显示器分辨率为1280 x 1024，我通常使用Firefox进行开发。这就是它的外观和应该看起来的样子。这个是正确的。

在此处输入图像描述

但是，在同一台显示器上的Chrome中查看时会有轻微的变化。注意右下角。

在此处输入图像描述

当在具有不同屏幕分辨率的另一台显示器中查看时，情况会变得更糟。这是我的工作屏幕，分辨率为1366 x 768。

在火狐上

在此处输入图像描述

在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 Media Types找到

于 2013-01-22T15:41:29.503 回答