Question

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

enter image description here

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

enter image description here

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

在 Firefox

上

enter image description here

在 Chrome

上

enter image description here

正如你所看到的，布局很糟糕。以下是代码。

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文件？

谢谢。

Answer 1

要涵盖所有平台/浏览器/等等......你将不得不使用一个框架，它变得笨重，或者如果你保持简单，我会采用一些@media规则来覆盖你的不同布局尺寸。可以在W3 Media Types

找到它的基础知识

网站布局在不同的屏幕分辨率下变得混乱

1 个答案: