CSS：固定布局还是浮动布局？[关闭]

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

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

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

这完全取决于您的受众以及您的网站如何组合在一起。有些布局可以变成液体并且工作得很好，而另一些布局必须固定（就像你描述的那样）。

为什么不为标题图片（刊头）使用 <img> 标签而不是使用背景图片？

我建议不要缩放你的标题图形;大多数浏览器在图像缩放方面都很糟糕（最近的邻居是什么？），而且对许多人来说看起来并不好。

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

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

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

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

为了举个例子，我们假设你的刊头的背景图片在一张城市天际线的照片上包含某种标志。总体而言，这是 1600px 宽。徽标位于图像的左侧，而城市景观则延伸到最右侧。我们假设您的标记大致如下所示：

<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 元素的宽度，该宽度介于 800px 和 1600px 之间（包括 1600px），具体取决于浏览器窗口的宽度。当 #page 元素宽度为 800 像素时，您只能看到天际线最左侧的 800 像素;当它宽 1600px 时，您会看到整个天际线。这样，您的徽标始终可见，并且当浏览器调整大小时，会显示更多的城市景观。

这确实需要有一个更大的图像开始（如果你使用弹性，至少和你的最大宽度一样宽），但结果是一个无论大小如何看起来都不错的刊头 - 正如 strager 所提到的，不依赖于浏览器的图像大小调整算法。

创建一个布局，其中文本列扩展到浏览器通常是一个坏主意。如果行长到长，文本将变得难以阅读。我建议为文本列选择固定的 with，可能大约 50 个字母宽。