响应式设计--几种布局

几种布局

1.固定布局

最佳页面宽度应该介于974px到984px之间。但相比其他数值而言，

960对网格布局则更加友好（因为960可以被3、4、5、6、8、10、12和15整除，所

以可以为网格布局提供多种可能）

固定布局带给我们的所谓“一致性”的优点其实也带有些许误导。如果你的

站点是960px宽的，当访客使用屏幕较小（假设是800px宽）的设备浏览站点时，他

将只能看到站点的一部分，而且还会看到一个丑陋的水平滚动条

2.流动布局

在流动布局中，度量的单位不再是像素，而是变成了百分比，这样可使页面具有

可变的特性。为元素的宽度会根据浏览器窗口的宽度自动进行调整。

也就避免了在使用大屏幕设备浏览固定布局时，人们所不愿见到的大

片空白出现。

3.弹性布局

弹性布局与流动布局类似，只是它们的度量单位不同——通常情况下，在

弹性布局中会以e m来作为单位。弹性布局带来的另外一个好处是随着用户增大或者减小字体，使用弹性布局的

元素的宽度也会等比例地变化

但是，在弹性布局中也可能出现令人讨厌的水平滚动条。如果你把字体大小设置

为16px，并把容器宽度设置为55em，那么就会在任何宽度小于880px（16×55）

的屏幕中出现水平滚动条。弹性布局中的这个问题甚至比固定布局中的情况还要

有更多的不确定性，因为如果用户把字体放大到了18px，那么你的容器宽度便会

达到990px（18×55）

4.混合布局

它结合了上面提到的两种或两种以上的布局方式。

例如，假设你有一个300px宽的广告区域，那么你可以将放置广告的边栏指定为

固定的300px宽，其余各列的宽度则以百分比为单位。这样做即保证了广告的宽

度是固定的300px（考虑到第三方的广告服务，这样安排是很有必要的），同时

除边栏之外的其他内容也能填满剩下的整个空间。