固定宽度与动态宽度

我注意到越来越多的网站采用固定宽度的布局，在这种情况下，调整浏览器窗口的大小只会导致出现滚动条，而在灵活的布局中，调整浏览器的大小会使页面的各个组成部分“收缩” 。
这样的StackExchange网站就是固定布局的一个示例。GMail和iGoogle是灵活布局的示例。选择一个而不选择另一个的原因是什么？

使用可变宽度的布局可能很难实现更复杂的设计。因此，我想这起了作用。

还有一个事实是，阅读非常宽的文本并不舒服。StackExchange网站上的列大小非常易于管理且易于阅读。使用可变宽度的布局，您不能仅仅将主要文本主体扩展到无法辨认的范围。甚至Google也限制了搜索结果的宽度。

当然，如果您有一个空间非常宝贵的网站（例如Google Docs和Google Maps），那么您真的想采用可变宽度方案来使用所有可用空间。

对于复杂站点，开发人员更容易解决此问题。同样，大多数固定宽度的站点将在1000像素左右。原因是只有1％的浏览器使用800x640，而0％的浏览器使用640x480。在此处查看最新统计信息。但是，这不包括移动设备。这是完全不同的球类游戏。

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

您必须查看您的听众，然后根据您认为他们想要的经验以及是否可变宽度比其他必须进行可变宽度开发的其他功能更重要来做出决定。

在这两者之间还有一个折衷，即您设置最小宽度和最大宽度（使用CSS），然后使用百分比宽度使其余部分在两个极端之间流动。例如，您可能希望左侧菜单栏的宽度不超过200像素，但要使主要内容流动。这种技术使您的网站可以扩展到访问者的分辨率，而不会在极高分辨率或极低分辨率下显得愚蠢。毕竟，HTML被设计为可流动的-它是一种标记语言，与印刷语言不同。

这种方法对于相对简单的设计（例如博客或呈现大量文本信息的设计）非常有效。确实，我在自己的个人网站上使用它。毕竟现在有很多人拥有宽屏或高分辨率的显示器-我的工作监视器是1680像素宽-那么为什么他们会失去大量的房地产并且仅仅因为设计师决定了适合他们的固定宽度而不得不水平滚动屏幕？最终，好的设计是要为用户提供最佳的体验-不仅仅是在设计师的显示器上看起来“漂亮”的东西。

您可能不必做出选择。List Apart 在响应式设计方面有出色的文章。主要思想是可以使用媒体查询来捕获浏览器窗口或视口大小的更改，并根据需要重新分配CSS。那里有很多书可供阅读，因此请查看文章以了解所有多汁的细节。但对于长期和短期的它（或者应该说是“宽和窄”的吗？）看看之前和之后，他们的榜样的页面。在之前网页尺度很好地到一个点，但如果你把它缩小够就有点笨重。在后 页面缩放比例也会变大，但是如果您将其设置得太窄而无法缩放以使其正常工作，它也会更改布局。

根据Jakob Nielsen 关于网页可用性的113设计指南：

67使用液体布局，以便主页大小可调整为不同的屏幕分辨率。

它也是十大最违规的首页设计指南之一：

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

混搭呢？如果有足够的空间，这将以固定的宽度（70em）显示＃content-section-否则，该部分将缩小到视口/浏览器窗口的80％。

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

动态布局的优点是它可以在所有屏幕尺寸（包括移动设备）上工作。尽管要使所有尺寸的东西看起来都不错，这是艰巨的工作。要问的问题是-您的访客会使用移动设备吗？