CSS：固定还是浮动布局？

我的问题围绕CSS固定布局和浮动布局展开，浮动布局扩展到浏览器的宽度

现在我遇到的问题是根据页面的宽度调整报头的大小（考虑到当前的浏览器实现，我理解这是不可能的）。在这一点上，我觉得我已经陷入了僵局：我是重新设计网站以使用固定的CSS布局，还是保留当前布局并尝试使报头图像扩展以填充提供的大部分空间？此外，移动到固定宽度布局的优点和缺点是什么，以及使用一种布局替代另一种布局的其他（看不见的）后果是什么

这个有问题的网站将作为对这个问题的评论——我不想被视为试图增加流量

---

编辑：还有其他想法吗？

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

固定宽度布局为设计者提供了更大的灵活性，但对访问者来说则不然。如果你创建了一个X像素宽的布局，那么你就可以根据自己的喜好逐像素微调你的网站，而“浮动”布局（我称之为液体布局）完全基于百分比值，因此不同的计算机会有所不同。我觉得这很难，因为你可以在你的屏幕上测试布局，而不知道它在其他人的屏幕上是如何显示的，并且（例如）20px的边距对768px或960px固定宽度布局的影响比1280px的液体计算机屏幕上的影响更大

IMO对固定宽度布局的主要缺点是，它在大屏幕上看起来太小，在小屏幕上看起来太大。768px过去是一个相当标准的固定宽度布局，但现在随着世界从800x600移开，它太小了。现在960px是相当标准的，对于800x600来说太大了，但是对于1280x1024来说仍然太小了

这完全取决于你的受众以及你的网站如何整合。一些布局可以是流动的，并且工作得非常好，而另一些布局必须固定（如您描述的那样）。

为什么不使用标签作为标题图像（masthead），而不是使用背景图像

我建议不要缩放标题图形；大多数浏览器在图像缩放方面都很糟糕（最近的邻居是什么？）

---

我自己也喜欢流体/浮子/液体布局。事实上，我的大多数网站都只使用一个栏目，所以我不必担心“普通”网站布局的复杂性

这是什么样的图像？它的任何部分都是可重复的吗？有时使用两层，一层或标记用于图像的重复元素，另一层用于固定元素

---

我们能举个例子吗？找到问题的正确答案会更容易。

在调整浏览器大小时显示图像的大小，而不是缩放图像，怎么样？虽然效果并不完全相同，但这是一种用图像填充整个空间的简单方法

为了这个例子，让我们假设你的报头的背景图像在城市天际线的照片上有某种标志。总的来说，这是1600像素宽。标志位于图像的左侧，而城市景观则延伸至最右侧。我们假设您的标记大致如下所示：

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

这里发生的情况是#masthead元素将扩展到#page元素的宽度，宽度介于800px和1600px之间（包括800px和1600px），具体取决于浏览器窗口的宽度。当#page元素的宽度为800px时，您只能看到天际线最左侧的800px；当它的宽度为1600px时，你可以看到整个天际线。这样，您的徽标始终可见，当浏览器调整大小时，更多的城市景观会显示出来

---

这确实需要一个更大的图像开始（至少与你的最大宽度一样宽，如果你去弹性），但结果是一个桅杆头，无论它是什么大小都会看起来很好-不依赖，如斯特拉格提到的，浏览器的图像大小调整算法。

一般来说，创建一个布局是不好的，在该布局中，文本列将扩展到浏览器中。如果线条变长，文本将变得难以阅读。我建议为文本栏选择一个固定的with，大约50个字母宽。

液体布局的问题是，它们在较大的屏幕上可能太大；没有人喜欢阅读每行20英寸长的文本。CSS没有栏目（但……唉，即使IE8也不支持），我读的是斯坦的天主教学校！我也是。我还是笑了。哇，这么久之后，我还是投了反对票。图片在我在问题评论中发布的链接上。它是头版的报头。

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

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