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

StackOverflow https://stackoverflow.com/questions/329900

  •  11-07-2019
  •  | 
  •  

题

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

现在我遇到这个问题是有报头调整大小根据页面（即我的理解是不可能给目前的浏览器实现的 CSS3的background-image: size; ）。在这一点上，我觉得我已经陷入了僵局各地：我返工的网站使用一个固定的CSS布局，还是我保持当前的布局，尽量使报头图像扩展以填充大部分的空间提供？此外，有什么优点和移动到一个固定的宽度的布局的缺点，并且使用一个布局比另一个的另一（看不见）的后果？

有问题的网站将给出这个问题的注释 - 我不想被看作是试图增加流量，它

。

编辑：在任何其他的想法

有帮助吗？

解决方案

什么作为浏览器的尺寸调整露出更多或更少的图像，而不是缩放图像？这是不完全一样的效果，但它是一个简单的方法来填充图像的整个空间。

让我们假设，对于例如起见，标头的背景图像包含某种上，比方说，一个城市的天际线的照片顶部的标志。这是，总体而言，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元件的宽度，这将是介于800像素和1600像素宽（含）根据浏览器窗口有多宽。当#page元素是800像素宽，你看到的只是最左边的天际线的800像素;当它1600像素宽，你看到整个地平线。这样，你的标志始终是可见的，当浏览器的大小时，更多的城市景观的显现出来。

这确实需要有一个较大的图像与开始（至少一样宽，你的最大宽度，如果你去弹），但结果是一个报头，将好看，不管它是什么规模 - 而不依赖上，如图strager提到的，浏览器的图像调整大小的算法。

其他提示

什么样的形象呢？是它的任何部分重复？有时使用两个层，一个或多个用于将图像的重复元素的标记，另一个用于固定元件。

可我们看到的例子吗？这将是更容易得到你的问题的正确答案。

如果你想扩展您的背景图片到你的页面的宽度，最好是使用固定大小的布局没有跨浏览器的方法来制作背景图像扩展到不同的大小是依赖于访客分辨率。

固定宽度的布局提供用于设计师更大的灵活性，但不能用于访问者。如果你创建一个布局是X像素宽，那么你就可以微调您的网站逐像素根据自己的喜好而“浮动”布局（我称他们为液体布局）是在百分比值完全基于因此有所不同从计算机到计算机。我觉得这是困难的，因为你可以在屏幕上测试的布局和不知道它是如何出现在别人的，和（为前。）一个20像素的保证金有更多的作用在768px或960像素的固定宽度布局比它上一个1280px液体的计算机屏幕。

在主要CON，IMO，以固定宽度的布局是，它看起来在更大屏幕上太小，在小屏幕上过大的事实。 768px曾经是一个相当标准的固定宽度的布局，但现在，随着世界从800×600移开太小。现在960像素相当的标准，这是太大了800×600，但还是太小上1280×1024。

这一切都取决于你的观众和您的网站是如何结合在一起。一些布局可以由液体和完全正常工作，而其它必须固定（如你所描述的）。

为什么不使用的 标记为您的标题图像（标头），而不是使用一个背景图像？

我建议不结垢你的标题图片;大多数浏览器都在图像缩放可怕的（最近的邻居是什么？），它会不会好看了很多人。

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

这通常是一个坏主意，以创建一个布局，其中文本列扩展到与浏览器。文字变得难以如果线路长到阅读。我建议宽安定在与用于文字列一个固定的，也许是大约50个字母。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top