CSS：固定布局还是浮动布局？

Question

我的问题围绕CSS固定布局和延伸到填充浏览器宽度的浮动布局。

目前，我遇到的问题是让标头根据页面宽度调整大小（我理解当前浏览器实现CSS3的background-image: size;不可能实现）。此时，我感觉自己已经陷入了僵局：我重新设计网站以使用固定的CSS布局，还是保留当前布局并尝试使标头图像扩展以填充大部分提供的空间？此外，移动到固定宽度布局的利弊如何，使用一种布局而不是另一种布局的其他（未见）影响是什么？

涉及的网站将作为对此问题的评论给出--我不想被视为试图增加流量。编辑：还有其他想法吗？

- Gortok

---

我读成了斯坦天主教学校！ - Rich Bradshaw

我也是。我仍然会为此而轻笑。 - George Stocker

哇，这么长时间后还被踩了。 - George Stocker

Answer 1

如果浏览器的大小发生变化，而不是缩放图像，那么是否可以显示更多或更少的图像？这不完全是相同的效果，但这是一种填充整个空间的图像的简单方法。

为了举例说明，假设您的标头背景图像包含某种标志，位于城市天际线的照片之上。总体上，这个图像宽度为1600像素。标志位于图像左侧，而城市景观向右延伸。我们将假设您的标记大致如下：

<div id="page">
  <div id="masthead">...</div>
  <div id="navigation">...</div>
  ...
</div>

我们可以将 #page 元素设置为 弹性 宽度，并在 #masthead 元素上应用背景图像：

#page {
  max-width: 1600px;
  min-width: 800px;
  width: 80%;
}

#masthead {
  background: url('path/to/image.jpg') no-repeat left top;
  height: 100px;
  width: auto;
}

这里发生的是，#masthead元素会扩展到#page元素的宽度，#page元素的宽度在800像素到1600像素之间（包括两端），具体取决于浏览器窗口的宽度。当#page元素宽度为800像素时，你只能看到天际线最左边的800像素; 当它的宽度为1600像素时，你可以看到整个天际线。这样你的标志始终可见，并且当浏览器调整大小时，会显示更多的城市景观。

这确实需要使用一个更大的图像作为起点（至少与您的max-width一样宽，如果您采用弹性布局），但结果是一个无论大小如何都很好看的标头 - 而不依赖于，正如strager所提到的，浏览器的图像调整算法。

- Greg Hines

Answer 2

这是什么类型的图片？它的任何部分是否可重复？有时我们可以使用两个图层，一个用于图像中可重复的元素，例如标签，另一个用于固定的元素。

能否给出一个示例？这将有助于更好地理解您的问题并得到正确的答案。

- roborourke

---

图片在我在评论中发布问题的链接上。它是首页的标头。 - George Stocker

Answer 3

如果您正在尝试将背景图像扩展到页面的宽度，最好使用固定大小的布局，因为没有跨浏览器方法可以使背景图像扩展到取决于访问者分辨率的不同大小。

固定宽度布局为设计师提供了更多的灵活性，但对于访问者来说则不然。如果您创建一个X像素宽度的布局，则可以逐像素地微调您的网站以使其符合您的喜好，而“浮动”布局（我称之为液态布局）完全基于百分比值，因此在计算机之间有所不同。我发现这很困难，因为您可以在屏幕上测试布局，但不知道它在其他人的屏幕上看起来如何，例如，在768px或960px固定宽度布局上，20px边距的影响要比在1280px液晶屏幕上小得多。

我个人认为，固定宽度布局的主要缺点是在较大的屏幕上看起来太小，在较小的屏幕上看起来太大。 768px曾经是相当标准的固定宽度布局，但现在已经过小，因为世界正在远离800x600。现在960px是相当标准的，这对800x600来说太大了，但在1280x1024上仍然太小。

这完全取决于你的受众和你的网站的整体构架。有些布局可以做成流式布局，并且可以工作得很好，而有些必须是固定布局（比如你所描述的那个）。

- Logan Serman

---

流体布局的问题在于在较大的屏幕上可能会显得过于宽大；没有人喜欢阅读每行都有20英寸长的文字。而且CSS并不支持列（至少目前还不支持...哎，即使是IE8也不支持）。 - Mr. Shiny and New 安宇

Answer 4

为什么不使用<img>标签来放置您的页眉图像（标志），而不是使用背景图像呢？

我建议不要缩放您的页眉图形；大多数浏览器在图像缩放方面表现糟糕（最近邻居算法？），这对许多人来说看起来不好。

我个人支持流体/浮动/液态布局。事实上，我的大多数网站都使用单列布局，因此我不必担心“正常”网站布局所具有的所有复杂性。

- strager

Answer 5

通常创建一个文本列随着浏览器的扩展的布局是不好的。如果行变得太长，文本就很难阅读。我建议为文本列设置固定宽度，可能在50个字符左右。

- olavk