it-swarm.cn

固定宽度与动态宽度

我注意到越来越多的网站已进入固定宽度的布局,其中调整浏览器窗口的大小只会导致滚动条出现,而不是灵活的布局,其中调整浏览器的大小会导致页面的组件“一起” 。
像这样的StackExchange网站是固定布局的一个例子。 GMail和iGoogle是灵活布局的示例。选择一个而不是另一个的原因是什么?

15
BenV

使用可变宽度布局可能很难实现更复杂的设计。所以我认为这起作用。

还有一个事实是,阅读非常宽的文本并不舒服。 StackExchange站点上的列大小非常易于管理且易于阅读。使用可变宽度布局,您不仅可以扩展主文本体,而不会使其变得难以辨认。甚至Google也限制了搜索结果的宽度。

当然,如果您的网站空间非常宝贵(例如Google Docs和Google Maps),那么您真的希望使用可变宽度方案来使用所有可用空间。

11
Kris

修复了复杂网站的开发人员更容易。此外,大多数固定宽度的站点宽约1000像素。原因是只有1%的浏览器使用800x640而0%使用640x480。查看最新的统计数据 这里 。这不包括移动。这是一个完全不同的球赛。

可变宽度布局的价值在于它允许人们在未最大化的窗口中轻松使用网站。

您必须根据您认为他们想要的经验来决定您的受众,并且如果您必须做宽度可变,那么可变宽度比您无法开发的其他功能更重要。

8
Ben Hoffman

在两者之间也存在折衷方案,您可以设置最小宽度和最大宽度(使用CSS),然后使用百分比宽度使剩余流量介于两个极端之间。例如,您可能希望左侧菜单列不会比200px窄,而是要流动的主要内容。这种技术使您的网站可以扩展到访问者的分辨率,而不会看到极高的分辨率或极低的分辨率。毕竟,HTML是为流动而设计的 - 它是一种标记语言,与打印不同。

这种方法适用于相对简单的设计,例如博客或提供大量文本信息的设计。确实,我自己使用它 个人网站 。毕竟很多人现在拥有宽屏或高分辨率显示器 - 我的工作显示器宽度为1680像素 - 所以为什么他们会失去很大程度的空间并且必须水平滚动只是因为设计师决定适合他们的固定宽度屏幕?最终,良好的设计是为用户提供最佳体验 - 这不仅仅是设计师监视器上看起来“漂亮”的东西。

3
Dan Diplo

根据 Jakob Nielsen113设计指南的主页可用性

67使用液体布局,以便主页大小适应不同的屏幕分辨率。

它也是 十大违规主页设计指南

战斗冷冻布局似乎是一场失败的战斗,但值得重复:不同的用户有不同的显示器尺寸。拥有大显示器的人希望能够调整浏览器大小以同时查看多个窗口。你不能假设每个人的窗口宽度都是800像素:对于某些用户来说太多了,对其他用户来说太少了。

1
melhosseiny

您可能没有必要做出选择。 A List Apart 有一个很好的 关于响应式设计的文章 。主要思想是你可以使用 媒体查询 来捕捉浏览器窗口或视口大小的变化,并根据需要重新分配CSS。那里有很多东西要读,所以查看 文章 所有多汁的细节。但是对于它的长短(或者应该是它的“宽和窄”?)看看他们的例子的 之前之后 页面。 之前 页面可以很好地缩放到一个点,但是如果你使它变得足够窄,它会变得有点笨重。 after 页面也可以缩放,但是当你将它缩小到适合缩放以便很好地工作时,它也会改变布局。

1
Alan

混乱怎么样?如果有足够的空间,则以固定宽度(70em)显示#content-section - 否则该部分将缩小到视口/浏览器窗口的80%。

#content {
    margin: 0 auto 2em 0;
    width: 70em;
    max-width: 80%; }
0
feeela

动态布局的优势在于它适用于所有屏幕尺寸,包括移动设备。尽管让所有尺寸的东西看起来都很好,但这项工作更难。要问的问题是 - 您的访问者是否会使用移动设备?

0
paulmorriss