我现在正在做一个网站,我正在决定是否应该让它流动。固定宽度的网站更容易制作,也更容易使它们看起来一致。
说实话,我个人更喜欢看那些能延伸到显示器全宽的流动网站。我的问题来自于这样一个事实,在大多数现代浏览器中,你可以按住鼠标滚轮来调整任何网站的大小。
那么,创建一个流畅的网站值得吗?
我现在正在做一个网站,我正在决定是否应该让它流动。固定宽度的网站更容易制作,也更容易使它们看起来一致。
说实话,我个人更喜欢看那些能延伸到显示器全宽的流动网站。我的问题来自于这样一个事实,在大多数现代浏览器中,你可以按住鼠标滚轮来调整任何网站的大小。
那么,创建一个流畅的网站值得吗?
当前回答
这取决于你的受众和你的内容。
以下是我尊敬的网站,我认为是模仿的例子。
流体的例子:
亚马逊
维基百科
静态的例子:
苹果
eBay
MSN
StackOverflow
MSDN
一些混合!
CNN
我想大多数时候我更喜欢静态。让它在更多的浏览器中看起来更好更容易。它也更容易阅读。
其他回答
在某种程度上,是的。
有一定的宽度,如果太宽,文本就会变得讨厌阅读。如果你有一个大显示器,很容易测试,只需抓起记事本,粘贴一些文本到它没有换行。
然而,当缩小到更小的尺寸时,流动可能是一个好主意。手机浏览器越来越能够很好地显示“正常”网站,但它们有时会受到宽度限制,因此,如果你的网站能容纳更小的空间,就会受益。
就我个人而言,我也喜欢把浏览器放在我的显示器上,但只有显示器宽度的一半(24英寸)。能够很好地扩展到这一点的网站是非常好的。
我认为这主要是为了方便用户。并不是所有的网站都能从流动中受益,但我认为那些有大量文本内容的网站是最能从中受益的,至少如果它们的最大宽度是流动的(比如800px或其他)
基于文本的应用:不是。基于表格的应用:是的。
流体布局的优点
拥有大显示器的人可以使用他们的屏幕空间。 当页面上有很多信息时,对于使用大显示器的用户来说更容易。
流动布局的缺点:
流动宽度的文本列如果太宽,则难以阅读。在报纸上使用专栏是有原因的:它使跳到下一行更容易得多。 (有点)难以实现,因为CSS的限制。
如果您正在显示表格数据(iTunes、db管理器……),流体宽度是好的。如果您正在显示文本(文章、wiki页面等),流体宽度是不好的。
I think it's nice to be able to scale well on a user's screen, rather than make the users pan and zoom. In a time when users surf the web from such a wide variety of devices, ranging from smartphones to ultra-mobile PCs, each with its own, possibly non-standard resolution, I think it's important to keep user-experience at a high level when your site is viewed on such screens. Regarding the text length, it could be bounded by a certain ratio, so it would fit nicely within the layout. I think there are also frameworks that may help with writing a site in a fluid manner, and help with coding maintainability.
我很喜欢那些最大宽度固定在800px - 1000px之间的网站,但也可以缩小,这样我就可以阅读内容,而不用左右滚动,也不用缩小,因为文本经常变得太小而无法阅读,这伤害了我的眼睛。所以,这通常是我想要争取的,因为我想建立我可以自豪的网站。
是的。页面缩放很棒,但它主要用于使文本变大,而不是使文本填充视口。当然,如果正文文本已经太宽了,缩小它以适应通常会使它无法阅读。
你需要液体布局,如果你想让文本适合视口,无论它是否被放大。
The point about ‘long lines being hard to read’ is often overstated by designers trying to justify fixed width designs(*), but in reality it doesn't seem to hold quite as strongly on-screen as it did on paper. Of course setting a good leading/line-height is important, and max-width can be used to inhibit the worst excesses of long lines. (Set it in font-relative em units.) You don't get max-width in IE6, but that's not the disaster it once was. (You can fix it with a little bit of JavaScript if you really care about those guys. I don't.)
(*这对于高度图形化的布局来说确实更少工作。但对于像StackOverflow这样更简单的布局,没有任何理由不采用液体布局。啧啧@SO,嗯!)