218

我现在正在制作一个网站，我正在尝试决定是否应该让它变得流畅。固定宽度的网站更容易制作，也更容易使它们看起来一致。

不过老实说，我个人更喜欢看那些延伸到我显示器全宽的流畅网站。我的问题来自这样一个事实，即在大多数现代浏览器中，您可以控制并滚动鼠标滚轮以基本上调整任何网站的大小。

那么创建一个流畅的网站值得麻烦吗？

4

20 回答 20

52

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

以下是我尊重的网站，我认为是模仿的例子。

流体示例：

亚马逊

维基百科

静态示例：

苹果

易趣

微信

堆栈溢出

MSDN

有些混合起来！

美国有线电视新闻网

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

于 2009-09-11T23:12:39.617 回答
43

使网站流畅，但添加最小/最大宽度属性似乎是两全其美，对我来说。您支持流动性，但您将其限制在一定的宽度（例如，800 像素和 1200 像素）。

这取决于您 - 以下是一些需要考虑的事项：

  1. 当行很长时，文本很难（呃）阅读。
  2. 您的观众可能有比正常更大或更小的分辨率，选择“不正确”的静态宽度会使他们烦恼。
  3. 维护一个流动的网站可以，但不一定比它的静态网站更难。
于 2009-09-11T22:46:38.257 回答
37

绝对地。对于拥有巨大显示器的人来说，不得不调整页面大小是一个很大的不便。某些布局也可能有点狡猾。小小的不便，无论多么微不足道，实际上都会影响人们对您网站的看法。

此外，上网本的分辨率很奇怪，因此很难为其设计网站。例如，我在 1024x600 上写这篇文章。

现在（在现代浏览器中）也不是特别难，尤其是在 CSS 中，min-以及max-heightCSS3 中的新渐变等，因此图像缩放在不久的将来不会成为大问题。

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

于 2009-09-11T22:45:53.233 回答
16

您必须意识到大多数计算机用户甚至不知道如何放大浏览器！大多数用户对我们所拥有的计算机的理解还很遥远。我们总是要记住这个事实。

于 2009-09-12T06:00:28.050 回答
9

基于文本的应用程序：否。基于表格的应用程序：是的。

流体布局的优点

  1. 拥有大显示器的人可以使用他们的屏幕空间。
  2. 当您的页面上有大量信息时，对于拥有大显示器的用户来说更容易。

流体布局的缺点：

  1. 如果它太宽，流体宽度的文本列很难阅读。在报纸上使用专栏有一个很好的理由：它使跳到下一行变得非常容易。
  2. （有点）难以实现，因为 CSS 的限制。

如果您要显示表格数据（iTunes、数据库管理器等），则流体宽度很好。如果您要显示文本（文章、wiki 页面等），则流体宽度不好。

于 2009-09-14T18:12:02.247 回答
8

从我的 iPhone 的角度来看，使用代码块时，固定宽度布局是有问题的。宽代码块的滚动条不显示，所以我无法阅读块的最右边。

否则，我认为这是一个简单的问题，您正在设计什么样的网站以及它在不同尺寸的屏幕和窗口上的外观。如前所述，可以选择设置最大宽度，但同样的警告适用于代码块和 iPhone。两者我都设计了，我不喜欢其中一个。

虽然，当我使用具有流畅布局的浏览器大小时，看着盒子四处移动很有趣，但我很容易被逗乐。

于 2009-09-12T00:08:06.100 回答
6

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

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

很棒的文章，演示了使用媒体查询使用真正流畅的布局。有时您需要为不同的用户代理构建单独的前端，但有时媒体查询是跨不同用户代理提供多种解决方案的完美工具。

于 2011-05-02T21:35:53.520 回答
5

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

于 2009-09-11T22:49:48.520 回答
4

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

请注意每种解决方案的优缺点。

于 2009-09-12T04:48:09.927 回答
3

在某种程度上 - 是的。

有一定的宽度，如果太宽，文本开始变得令人讨厌。如果您有一个大显示器，很容易测试，只需抓住记事本并将一些文本粘贴到其中而无需换行。

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

就我个人而言，我也喜欢在我的显示器上保留浏览器，但只保留显示器宽度的一半（24 英寸）。可以很好地缩放到其中的站点非常好。

我认为这主要是一个用户便利案例。并非所有网站都会从流动性中受益，但我认为拥有大量文本内容的网站会从中受益最多，至少如果它们的流动性达到最大宽度（比如 800px 或其他）

于 2009-09-11T22:50:50.147 回答
2

你可以把它变成这样。

# 使主布局流畅并应用' max-width: 1140px '并将其居中。

这样一来，大屏幕上不会出现“长行”文本，也不会在较小的屏幕（不包括 800x*** 和更低）上正确设置网页。

我已经在我的新项目中实现了这种方法，它的工作原理就像一个魅力。

atb .. :)

于 2011-03-19T09:45:38.460 回答
2

是的。页面缩放很棒，但它主要用于使文本变大，而不是使文本填满视口。当然，如果正文已经太宽，缩小以使其适合通常会使其不可读。

如果要使文本适合视口，无论是否缩放，都需要液体布局。

设计师试图证明固定宽度设计（*）的合理性通常夸大了“长线难以阅读”的观点，但实际上它在屏幕上似乎并不像在纸上那样强烈。当然，设置好的前导/行高很重要，并且最大宽度可用于抑制最严重的过长行。（将其设置为相对于字体的 em 单位。）在 IE6 中您不会获得 max-width，但这不是曾经的灾难。（如果你真的关心那些人，你可以用一点 JavaScript 来修复它。我不关心。）

（* 对于高度图形化的布局来说，这确实是更少的工作。但是对于一个更简单的布局，比如，呃，StackOverflow 的，真的没有任何理由不去流动。Tsk @SO，嗯！）

于 2009-09-11T22:47:32.593 回答
2

前言：不是专业的网络艺术家。

我发现在手机和超宽屏尺寸下，特别是在任何相当有趣的复杂性中，有太多繁琐的部分无法让事情顺利进行。

通常，我会以某种方式围绕固定宽度的网站进行设计；通常以 [600,1200] 为界。

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

于 2009-09-11T22:55:52.413 回答
1

是的，流畅的网站值得创建
正如您所说，当您在设计阶段正确计划时，它看起来既好又合理。

您对 Ctrl + Scrollbar 的影响的怀疑并不是什么大问题。此功能主要用于可访问性，通过增加大小使文本更具可读性。

但是，如果您在像素 (px) 中提及所有尺寸，则不会发生。只有当您使用“em”来指定大小时，才会进行适当的调整。所以你有办法打开/关闭它

于 2010-09-09T11:28:56.967 回答
1

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

  1. 对于具有大量简单信息的网站（如新闻门户），最好使用流畅的布局。

  2. Web 服务在固定维度上看起来和工作更好，所以你总是知道界面元素在它们的位置上的位置，并且它们不会经常移动。

于 2009-09-12T00:24:00.783 回答
0

流体设计——真正的流体——很难。很难。这不仅仅是页面宽度的问题——你的字体是否缩放，所有的东西都随它们缩放吗？理想情况下：

  • 尺寸应该定义在em而不是px
  • ...这适用于元素大小，而不仅仅是字体！
  • 给定字体大小或缩放级别的变化，页面元素之间的大小应该相同

我们的主要产品是流动的，从我作为设计师的角度来看，这很痛苦，尤其是因为它涉及到大量用户生成的内容。

一方面，图像 - 在固定宽度的网站中，您可以拥有一个填充一半宽度的图像，并且看起来很棒。在一个流动的站点中，这个图像很可能会迷失在一片空白的海洋中，看起来相当孤独。

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

要回答“值得”这个问题吗？是的，如果你做对了。

这是一个场景：选择一个固定宽度的网站：你的老板在他全新的 1920x1600 笔记本电脑上向客户展示它，然后向你抱怨“这家伙的屏幕上看起来怎么这么小！”

于 2009-09-14T17:57:39.013 回答
0

我要反对大多数人说不。推理：像维基百科这样的流动网站是在大屏幕上阅读的噩梦，因为它们的行长很长（尽管它的引用使它在最好的时候很难阅读）。

问题确实发生了，因为没有相对于屏幕分辨率来调整文本大小的机制。如果您可以在更大的分辨率下自动使文本更大，您可以保持更接近每行 80 多个字符，这通常被认为是可读性最好的。

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

于 2009-10-06T17:06:14.967 回答
0

我认为能够在用户的屏幕上很好地缩放，而不是让用户平移和缩放，这很好。在用户使用各种各样的设备（从智能手机到超便携 PC）上网的时代，每一种设备都有自己的，可能是非标准的分辨率，我认为保持高水平的用户体验是很重要的在此类屏幕上查看您的网站。关于文本长度，它可以以一定的比例为界，因此它可以很好地适应布局。我认为还有一些框架可能有助于以流畅的方式编写网站，并有助于编码的可维护性。

于 2009-09-17T14:51:19.743 回答
0

我喜欢网站的最大宽度固定在 800 像素到 1000 像素之间，但也可以缩小，这样我就可以阅读内容而无需左右滚动，也无需缩小，因为文本通常变得太很小的阅读，它伤害了我的眼睛。所以，这通常是我努力的目标，因为我想建立我可以引以为豪的网站。

于 2012-05-05T03:34:52.613 回答
0

我是固定在 < 800px 的忠实粉丝……阅读更窄的列更容易，它可以在任何地方工作。也就是说，如果您正在尝试制作一个呈现超文本的网站......呈现应用程序前端的网站，我认为完全是另一罐蠕虫......

于 2009-09-12T02:49:57.493 回答