弹性布局相对于字号(而不是浏览器宽度)来设置元素的宽度。通过以em为单位设置宽度,可以确保在字号增加时整个布局随之扩大。这可以将行长保持在可阅读的范围,对于视力弱或有认知障碍的人尤其有用。
与其他布局技术一样,弹性布局也有自己的问题。弹性布局的一些问题与固定宽度布局相同,比如不能充分利用空间。另外,因为在文本字号增加时整个布局会加大,所以弹性布局会变得比浏览器窗口宽,导致水平滚动条出现。为了防止这种情况,可能需要在主体标签上添加100%的max-width。IE6和更低版本当前不支持max-width,但是Safari和Firefox等符合标准的浏览器支持它。
创建弹性布局比创建流体布局容易得多,因为所有HTML元素基本上一直出现在相同的相对位置上,它们仅仅是同时随文本字号而增大。将固定宽度布局转换为弹性布局是非常简单的任条。技巧是要设置基字号,让1em大致相当于10像素。
大多数浏览器上的默认字号是16像素,10像素大约是16像素的62.5%,所以在主体上将字号设置为62.5%:
body {
font-size: 62.5%;
}
因为在使用默认字号时1em现在相当于10像素,所以可以将所有像素宽度换为em宽度,从而将固定宽度布局转换为弹性布局:
#wrapper {
width: 72em;
margin: 0 auto;
text-align: left;
}
#mainNav {
width: 52em;
float: right;
}
#mainContent {
width: 32em;
float: left;
}
#secondaryContent {
width: 18em;
float: right;
}
在使用常规文本字号时,这些代码产生的布局与固定宽度布局看起来一样(见下图),
但是它会随着文本字号的增加而漂亮地增大(如图)。
注:本例中的HTML代码与《流体布局》中的相同。