9.1.2 流式布局

在移动终端兴起的时代，可以预见的是，未来还会涌现出更多大小不一的屏幕，人们需要一种灵活的、能够适应未知设备的方法，使得我们的设计在所有屏幕中都能完美显示，这就催生了流式布局。

使用流式布局时，尺寸不再使用像素，而是使用百分百进行设置。这种布局可以自适应用户的分辨率，并根据浏览器窗口尺寸自由伸缩，非常高效的利用空间。当浏览器窗口变大，元素的尺寸会变宽，当浏览器窗口变小，元素的尺寸也会跟着变小。页面周围的空白区域在所有分辨率和浏览器下都是相同的，在视觉上更美观。如果设计良好，流式布局可以避免在小分辨率下出现水平滚动条。

使用百分比布局后，页面就能根据窗口尺寸自由伸缩，高效利用空间。但是，流式布局也不是没有问题。在浏览器窗口变得很小时，元素的会变得很窄，很难阅读。因此，常常需要添加以 px 或 em 为单位的 min-width，以防止布局变得太窄。但是，如果 min-width 设置的太大，流式布局的灵活性就会大打折扣。

与之相反，在超大显示器上，这种设计看起来可能宽得可笑，文本行就变得太长，阅读起来非常困难。可以采取几个措施来避免这个问题。首先，元素只跨越窗口宽度的一部分，比如90%，而不是整个浏览器窗口。其次，可以使用百分比为元素设置内边距和外边距，这样的话，内边距和外边距宽度将随窗口尺寸而变化，防止设计变得过宽。再次，可以使用媒体查询，针对不同的窗口尺寸，为元素设置不同的宽度。最后，对于非常严重的情况，可以使用 max-width 属性，为最外层的容器设置最大宽度，以防止页面无限制的扩张。