《响应式Web设计实践》一2.1 布局选项

本节书摘来异步社区《响应式web设计实践》一书中的第2章，第2.1节，作者： 【美】tim kadlec 译者： 侯鸿儒 责编： 赵轩，更多章节内容可以访问云栖社区“异步社区”公众号查看。

响应式web设计实践

要想弄清楚在哪些情况下灵活布局可能会是我们最好的选择，我们就要先知道我们还有哪些选择。只有先明白了每种选择的优缺点，我们才有可能做出正确的决定，并保证我们的站点能在各种环境中发挥出最大优势。

在广受好评的《flexible web design（灵活的web设计）》一书中，作者zoe mickley定义了4种布局类型：固定布局、流体布局、弹性布局和混合布局。

这里提到的每种布局都有着它们各自的优势、劣势以及面临的挑战。

在固定布局中，页面宽度会被指定为特定大小的像素，其中960px是使用最为广泛的宽度。cameron moll在2006年发表的一篇名为“optimal width for 1024px resolution？”（1024px分辨率屏幕的最佳页面宽度？）的文章中，对越来越流行的1024分辨率屏幕的“最佳”页面宽度进行了仔细的分析：在考虑了chrome之后，他认为最佳页面宽度应该介于974px到984px之间。但相比其他数值而言，960对网格布局则更加友好（因为960可以被3、4、5、6、8、10、12和15整除，所以可以为网格布局提供多种可能），而且它也能与互动广告局（iab）（译者注：互动广告局是一个非盈利性的广告商业组织，主要负责研究、制定广告标准，并为在线广告业提供合法支持）的标准广告大小很好地配合，因此这一宽度得到了广泛采用。

固定布局是web布局中最为常见的实现方式，因为固定布局会给人一种对页面拥有较多控制权的错觉。能确切地知道你的站点会以多宽来显示，这使得你能创建出拥有大量图形的设计，而且即使在不同的屏幕上，它们也能看起来相当一致。

然而，固定布局最大的问题在于，你做的一切都是在许多假设前提之下的。当你决定站点应该有多宽时，你不得不去猜测什么样的尺寸可以照顾到大多数的访客，而这其中又暗藏着比从表面上看起来多得多的技巧。早在智能手机、平板电脑这些设备出现之前，就已经存在了大量使用不同大小屏幕的访客了，而这也仅仅是个开始，因为有些人并不会全屏浏览网页，还有些人的浏览器装有带边栏的插件——这些都在很大程度上降低了站点可以利用的实际空间。

此外，固定布局带给我们的所谓“一致性”的优点其实也带有些许误导。如果你的站点是960px宽的，当访客使用屏幕较小（假设是800px宽）的设备浏览站点时，他将只能看到站点的一部分，而且还会看到一个丑陋的水平滚动条（图2.1）。

大屏幕设备也同样存在问题：如果有人用大屏幕设备浏览960px宽的站点，那他就会在页面两边看到大片的、未使用的空白区域。虽然留白作为设计的一部分固然是好的，但是对于人们意料之外的大片空白，我想没有谁能从中获益。

严格的固定布局在今天广泛而多样的设备生态系统中早已问题重重，因为当今很多最新、功能最强的手机和平板电脑的浏览器都会默认显示缩小之后的网页，以此来适应它们那较小的屏幕。虽然可以在屏幕上通过手指来缩放页面（当然提供这样的放大功能总比不提供要好），但这样的操作还是会让人感到繁琐，况且这一过程也远远不能称之为是一种享受。

在流动布局中，度量的单位不再是像素，而是变成了百分比，这样可使页面具有可变的特性。你可以设计一个占容器宽度60%的内容栏、一个占容器宽度30%的边栏，以及一个占容器宽度10%的分隔区域。采用这种方法定义，意味着你不用再去关心用户使用的到底是1024px宽的桌面浏览器，还是768px宽的平板电脑浏览器，因为元素的宽度会根据浏览器窗口的宽度自动进行调整。

注意 gillenwater在她的分类中称为流体布局；在本书中称为流动布局。

流动布局的设计可以避免许多会在固定布局中遇到的问题，例如，在大多数情况下，流动布局中都不会出现水平滚动条。由于站点可以根据浏览器窗口的宽度来自动调节自身宽度，因此站点将可以充分利用并适应各种大小的可用空间，从而也就避免了在使用大屏幕设备浏览固定布局时，人们所不愿见到的大片空白出现。

同时，在实施诸如媒介查询、针对不同分辨率优化样式这样的响应式策略时，流动布局能使这些策略更容易实现（我们会在后面的章节中对此做详细的介绍）。由于没有那么多的问题需要修复，所以需要写的css也相对较少。但是，单独使用流动布局这一种方法依然不足以保证所有元素在从手机到电视机等一系列设备都能保持良好的效果。因为有些文本的行宽在大屏幕上看起来会太宽，而在小屏幕上又看起来太窄。流动布局仅仅是个开始，后面还会有为什么这本书没有到此为止的其他原因。

弹性布局与流动布局类似，只是它们的度量单位不同——通常情况下，在弹性布局中会以em来作为单位。1em相当于当前字体的大小，例如，如果body的字体大小是16px，那么此时1em就等于16px，同理2em等于32px。

弹性布局为设计师们在排版方面提供了强大的控制权。大量研究表明，理想的阅读文本的行宽介于45到70个字符之间。利用弹性布局，你可以将容器的宽度设定为55em，这样就可以使容器维持在一个合适的宽度了。

弹性布局带来的另外一个好处是随着用户增大或者减小字体，使用弹性布局的元素的宽度也会等比例地变化，我们会在后面讨论字体大小时进一步讨论这个问题。

但是，在弹性布局中也可能出现令人讨厌的水平滚动条。如果你把字体大小设置为16px，并把容器宽度设置为55em，那么就会在任何宽度小于880px（16×55）的屏幕中出现水平滚动条。弹性布局中的这个问题甚至比固定布局中的情况还要有更多的不确定性，因为如果用户把字体放大到了18px，那么你的容器宽度便会达到990px（18×55）。

我们的最后一个选择就是混合布局，它结合了上面提到的两种或两种以上的布局方式。

例如，假设你有一个300px宽的广告区域，那么你可以将放置广告的边栏指定为固定的300px宽，其余各列的宽度则以百分比为单位。这样做即保证了广告的宽度是固定的300px（考虑到第三方的广告服务，这样安排是很有必要的），同时除边栏之外的其他内容也能填满剩下的整个空间。

视口 浏览器呈现网页时的可见区域。

但是在流动布局中使用上面这种方法会很容易使页面变得凌乱不堪，如果把边栏设置为300px宽，把主要内容栏设置为70%，那么当屏幕宽度小于1000px时，你还是会遇到水平滚动条的问题。因为此时300px宽的边栏已经超过了分配给它的宽度，即视口宽度的30%，剩下的空间已经小于了内容栏所要求的70%。不过万幸的是，还有另外一种创建混合布局的方法，我们会在后面的章节中提到。

如果你是毫无压力地读完上面这一段的，而且没有回想起你高中的数学课，那么我可就要为你鼓掌了。

那么到底哪种方式才是正确的、能对于各种设备和环境都具有响应性的呢？从根本上来说，这取决于你特定的项目，因为每一种方法都有其优势和不足。

大多数情况下，最佳答案是更具灵活性的那几种布局——流动布局、弹性布局或者混合布局——因为相比固定布局，它们对未来更加友好。

虽然能够通过使用媒介查询来在几个固定布局之间来回切换，但这样做仍旧存在限制。因为使用一个这样的“可切换”的固定布局，会使得你的站点在某几个特定分辨率的屏幕中显示得非常好，但在这几个值之间过渡的那些分辨率的屏幕中就会显得比较尴尬。这样一来，用户就会受到你的决定的支配：如果他的设备与你选定的不一致，那么他的体验还不如你什么都不做时好呢。

媒介查询 媒介查询允许你根据设备的信息——诸如屏幕宽度、方向或者分辨率等属性来使用不同的样式。

所以，虽然“可切换”的固定布局的方法在大方向上是对的，但这有点像是每天晨跑前，你都要花30分钟先坐在沙发上吃个冰激凌一样——虽然有总比没有强，但你没有得到你本应该得到的全部。

断点 那些被指定的、开始应用某一新的媒介查询的点。例如，一个在980px处的断点的意思是，当浏览器宽度大于或小于这一数值时，新的媒介查询将被触发。

相反，如果你使用流动布局，至少你已经得到了很大一部分。甚至没有媒介查询的帮助，你的设计都能够在不同的视口之间作出调整，虽然会有一些不完美。

当你开始强调媒介查询的作用时，你便很容易忽视掉另外一点：其实是弹性布局或流动布局在发挥更主要的作用（参见第3章）。流动布局为你做的事情越多，你需要创建的断点、写的css代码就越少。当你有了一个强大的流动布局的时候，媒介查询就会弱化为一种调整设计的手段，而不必再去重新创建另外的设计。