我现在正在做一个网站,我正在决定是否应该让它流动。固定宽度的网站更容易制作,也更容易使它们看起来一致。

说实话,我个人更喜欢看那些能延伸到显示器全宽的流动网站。我的问题来自于这样一个事实,在大多数现代浏览器中,你可以按住鼠标滚轮来调整任何网站的大小。

那么,创建一个流畅的网站值得吗?


绝对的。对于拥有巨大显示器的人来说,不得不调整页面大小是非常不方便的。在某些布局上,它也可能有点不可靠。一点小小的不便,无论多么微不足道,实际上都会影响人们对你网站的看法。

此外,上网本的分辨率很奇怪,这让网站设计变得很困难。例如,我在1024x600的像素上写这个。

现在这也不是特别难(在现代浏览器中),特别是在CSS中的最小高度和最大高度,以及CSS3中的新梯度等,所以图像缩放在不久的将来不会是一个大问题。

针对下面的评论,我认为在这种特殊情况下利大于弊——IE6到处都是问题。我们只需要面对它。


对我来说,让网站变得流畅,但添加最小/最大宽度属性似乎是两全其美的。你支持流动性,但你把它限制在一定的宽度(比如,800px和1200px)。

这取决于你——这里有一些需要考虑的事情:

当行很长时,文本很难阅读。 你的用户可能拥有比正常情况下更大或更小的分辨率,而选择一个“不正确的”静态宽度将会惹恼他们。 维护一个流动站点可能会比较困难,但并不比维护静态站点困难得多。


是的。页面缩放很棒,但它主要用于使文本变大,而不是使文本填充视口。当然,如果正文文本已经太宽了,缩小它以适应通常会使它无法阅读。

你需要液体布局,如果你想让文本适合视口,无论它是否被放大。

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,嗯!)


这取决于你想做什么。来看看SO。它是固定宽度的,非常棒。事实上,如果它是流动的,它就有点像PITA。有些网站使用动态布局会更好看,但就我个人而言,我会选择固定布局,除非你有充分的理由使用动态布局。


在某种程度上,是的。

有一定的宽度,如果太宽,文本就会变得讨厌阅读。如果你有一个大显示器,很容易测试,只需抓起记事本,粘贴一些文本到它没有换行。

然而,当缩小到更小的尺寸时,流动可能是一个好主意。手机浏览器越来越能够很好地显示“正常”网站,但它们有时会受到宽度限制,因此,如果你的网站能容纳更小的空间,就会受益。

就我个人而言,我也喜欢把浏览器放在我的显示器上,但只有显示器宽度的一半(24英寸)。能够很好地扩展到这一点的网站是非常好的。

我认为这主要是为了方便用户。并不是所有的网站都能从流动中受益,但我认为那些有大量文本内容的网站是最能从中受益的,至少如果它们的最大宽度是流动的(比如800px或其他)


前言:我不是专业的网页美工。

我发现,在手机和超宽屏的尺寸上,有太多精细的地方让事情变得如此流畅,尤其是在任何相当有趣的复杂情况下。

通常,我以某种方式设计固定宽度的站点;通常以[600,1200]为界。

我还发现超宽的内容列阅读起来很麻烦。我似乎记得有一些研究建议每栏一行的最佳字数。


这取决于你的受众和你的内容。

以下是我尊敬的网站,我认为是模仿的例子。

流体的例子:

亚马逊

维基百科


静态的例子:

苹果

eBay

MSN

StackOverflow

MSDN


一些混合!

CNN

我想大多数时候我更喜欢静态。让它在更多的浏览器中看起来更好更容易。它也更容易阅读。


从我iPhone的角度来看,固定宽度的布局在使用代码块时是有问题的。宽代码块的滚动条没有显示,所以我无法读取该块的最右侧。

除此之外,我认为这是一个简单的问题,你要设计什么样的网站,以及它在不同尺寸的屏幕和窗口上看起来如何。如前所述,有一个选项可以设置最大宽度,但同样的警告适用于代码块和iphone。这两种我都设计过,我不喜欢其中一种。

虽然,当我使用流动布局来调整浏览器大小时,看着这些框移动是很有趣的,但我很容易被逗乐。


我认为流动/固定的决定也应该基于网站的内容:

对于有大量平原的地方 信息(如新闻门户), 最好使用流体布局。 web服务更好地进行查看和工作 固定的尺寸,所以你总是知道 界面元素位于哪里 在他们的地方,他们没有移动 约不断。


我是固定< 800px的大粉丝…更窄的列更容易阅读,而且适用于任何地方。也就是说,如果你想做一个展示超文本的网站……提供应用程序前端的网站,我认为完全是另一罐蠕虫…


评论中有很多好的观点,但从你的问题来看,你似乎真的喜欢流畅的设计,想要创建一个,所以去做吧,这是你的网站,它不必像网络上的其他网站一样。

只要注意每种解决方案的利与弊。


你必须意识到大多数电脑用户甚至不知道如何放大浏览器!大多数用户对计算机的理解还远远不够。我们必须永远记住这个事实。


流体设计——真正的流体——是困难的。很努力。这不仅仅是一个页面宽度的问题——你的字体是否可以缩放,以及所有东西是否都可以缩放?理想的情况是:

大小应该用em而不是px来定义 ...这不仅适用于字体,还适用于元素大小! 给定字体大小或缩放级别的变化,页面元素之间的相对大小应该是相同的

我们的主要产品是流动的,从我作为设计师的角度来看,这是一种痛苦,特别是因为它涉及大量用户生成的内容。

首先,图片——在一个固定宽度的网站上,你可以让图片填充一半的宽度,而且看起来很棒。在一个流动的网站中,这张图片很可能迷失在空白的海洋中,看起来相当孤独。

一旦border-radius和其他CSS3属性更多地发挥作用,生活应该会更容易,但遗憾的是,我们的核心受众是政府工作人员,他们仍然使用IE F@!* ING 6 !


为了回答这个问题,“值得吗?”是的,如果你做得对的话。

这里有一个场景:选择一个固定宽度的网站:你的老板用他全新的1920x1600笔记本电脑向客户展示它,然后向你抱怨“在这个人的屏幕上看起来多么小!”


基于文本的应用:不是。基于表格的应用:是的。

流体布局的优点

拥有大显示器的人可以使用他们的屏幕空间。 当页面上有很多信息时,对于使用大显示器的用户来说更容易。

流动布局的缺点:

流动宽度的文本列如果太宽,则难以阅读。在报纸上使用专栏是有原因的:它使跳到下一行更容易得多。 (有点)难以实现,因为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.


我要反对大多数人,说不。推理:像维基百科这样的流动网站,由于它们的行长,在大屏幕上阅读是一场噩梦(尽管它的引用在最好的时候也很难阅读)。

出现这个问题的原因是,没有一种机制可以根据屏幕分辨率调整文本的大小。如果你可以在更大的分辨率下自动增大文本,你就可以保持每行80多个字符的最佳可读性。

还有图像和其他固定大小元素的问题。你可以拥有较大的图像,并在必要时让浏览器缩小它们,但这样你就会遇到其他问题,比如更长的下载时间,以及许多浏览器中的图像质量问题。


是的,流动网站是值得创建的 就像你说的,如果你在设计阶段规划得当,它看起来很好,也很合理。

你对Ctrl + Scrollbar的影响的怀疑不是什么大问题。 这个特性主要是为了可访问性,通过增加大小使文本更具可读性。

然而,如果你在像素(px)中提到所有的大小,就不会发生这种情况。 只有在使用“em”来指定大小时,才会进行适当的调整。所以你有办法打开/关闭它


你可以这样做。

设置主布局为流体,应用'max-width: 1140px'并居中。

这样在大屏幕上就不会出现“长行”的文本,在小屏幕上也不会出现适当的网页布局(不包括800x***及更低的屏幕)。

我已经在我的新项目中实施了这种方法,它就像一个魅力。

a.t.b . .:)


最重要的是考虑您的网站或应用程序的主要用例。你希望人们只在移动设备上使用它吗?手机、上网本、台式机?

看看Ethan Marcotte的“响应式Web设计”:http://www.alistapart.com/articles/responsive-web-design/

这是一篇很棒的文章,展示了使用媒体查询实现真正流畅的布局。有时需要为不同的用户代理构建单独的前端,但有时媒体查询是跨不同用户代理提供多种分辨率的完美工具。


我很喜欢那些最大宽度固定在800px - 1000px之间的网站,但也可以缩小,这样我就可以阅读内容,而不用左右滚动,也不用缩小,因为文本经常变得太小而无法阅读,这伤害了我的眼睛。所以,这通常是我想要争取的,因为我想建立我可以自豪的网站。