自适应布局

自适应布局是具有灵活变动宽度特性的布局，也被称为流式布局，这种布局会根据网页浏览器的窗口大小相应地调整自己的宽度。在这类布局中，容器中的主体部分的宽度以当前浏览器的窗口宽度为基准，按照一定的百分比进行定义。当浏览器的尺寸发生变化时，布局也发生变化，因为用户调整窗口的操作已经改变了布局所依赖的基准。换句话说，这类布局中各区域的宽度会随着用户浏览器窗口的调整自动变化。所以，如果用户觉得正在浏览的文章的行宽不是很合适，通过简单地调整窗口尺寸，内容区域就会自动进行调整。

这类布局中，布局元素之间的关系至关重要，因为布局中子元素的宽度是以父元素的百分比设置的（不是相邻的元素）。例如，如果布局容器的宽度设置为90%（它的父元素为浏览器窗口），导航区的宽度设置为80%，那么导航区的宽度就是浏览器宽度的72%（1×0.9×0.8=0.72）。由此可见，设计流式布局需要对设计的结构有深度的了解。对设计师而言，过程也许痛苦，但成功的设计会让网站更加灵活地面对使用不同终端的用户。

流式布局能够尽可能多地使用浏览器的可用空间，设计师可以有足够的空间来平均排布页面中的内容。设计得当的布局可以保持空白区域始终一致，不管浏览器或者屏幕的分辨率如何变化，这样的设计显得更加一致并且对用户友好。同时，这类布局也消除了低分辨率显示器上刺眼的水平滚动条。

和固定宽度布局不同，流式布局赋予用户更大的自由度来调整布局的宽度。伴随着这种自由，设计师将严格、一致的像素布局转移到一种更加灵活（也因此更有风险）的环境中来。这时，对网站中特定元素之间比例关系的定义变得相当抽象和困难。这也正是多数设计师避免使用流式布局的原因，因为这种布局剥夺了设计师在像素级精度上预测定位元素的能力。

设计师在用相对值替代绝对值的过程中，经常将这些值进位或者去位（例如，将15.433 33%变成15.43%或者15%），这样设计就变得更加不精确。最后的设计也许在一些低分辨率屏幕上表现良好，但在高分辨率情况下会发生奇怪的现象，如布局中显著的空白、内容区太宽难以阅读等。

事实上，内容区过宽的结果是流式布局最显著的缺点。由于内容区的宽度取决于用户视窗的大小，宽屏的用户会发现每一行都是如此的长，以至于阅读起来很不舒服。如果一个使用流式布局的页面中没有这么多的文字，用户将看到孤零零的一行字，侧边栏高得非常不协调，周边还充斥着大量的空白。

为了获得最佳的阅读效果（每行47~86个英文字母），设计师通常为内容区 #content-block设置在此基础上加10%的宽度。除非设计的可读性会在低分辨率情况下变得很糟糕，一般不会设置最小宽度。

在CSS 中，使用CSS 属性“max-width”来定义布局的最大宽度。几乎所有的主流浏览器都支持这个属性（如IE 7+、Firefox 1+、Safari 2+、Opera 9.2+），当然IE 除外。

为解决这个问题，设计师通常会在内容区域设置一个最大宽度，以此来将布局限制在一个较为理想的宽度中。

但是，仍有一个变通的解决方法。注意，在IE8.0版本中，IE不再支持微软的动态属性（MSDN IE Blog“ Ending Expressions”），即CSS表达式。所以IE6中的错误修正并不会在更高版本的IE中产生副作用。动态样式属性允许使用类似Java Script中的结构控制和数学计算的语法，网页开发人员斯文德·托菲特在一篇如何解决IE浏览器中最大宽度问题的文章中有所讨论。根据文章中的示例，可以限制 #content-block 的宽度。

#content {

max-width: 30em;

width: expression(

document.body.client Width ＞ (500/12) *

parse Int(document.body.current Style.font Size)?

"30em":

"auto");

}

代码检查用户相对浏览器宽度的字体尺寸设置（以pt为单位）。托菲特认为，不管在什么情况下，使用默认12 pt 的字体时，500 px（像素）要比30 em 宽，所以上面的代码中使用了30 em 作为布局的宽度。

其原理是，如果内容部分的宽度大于500 px与12 的比值乘以用户字体的设置，就将宽度设置为30 em。相反的情况下，让宽度保持自动（使用了“auto”属性）。由于动态样式属性没有包含在W3C的CSS2规范中，使用这种方法会让样式表无法通过验证。读者可以根据自身情况使用，能够为市场上仍然是最流行的浏览器提供带有最小宽度和最大宽度的流式布局，付出这点代价也许是微不足道的。

Clearleft 网站就是使用了自适应宽度布局的例子。图4.5展示了网站在1 280 px和800 px情况下的表现。注意看内容区域是如何自动调整“We make websites better”这句话的，在1 280 px时的两行变成了800 px时的3行。

图4.5

最后，使用上面固定宽度布局的HTML结构来实现一个简单、纯粹的两栏自适应布局。再次提醒，记得使用多种浏览器来验证结果是否跨浏览器兼容。

#container {

margin: 0 auto;

width: 75%;

}

#header {

width: 100%;

}

#content {

width: 60%;

float: left;

display: inline;/* IE 5/6 Doubled Float-Margin Bug */

}

#sidebar {

width: 40%;

float: right;

display: inline;/* IE 5/6 Doubled Float-Margin Bug */

}

#footer {

width:100%;

clear:both;

}

图4.6为一个自适应布局的示例，容器的宽度设置为窗口的75%，并且分别在1 280 px和800 px的环境下进行了测试。

图4.6

在为自适应布局选择一个合适的宽度时，使用“width：auto”或者其他的百分比值会非常合理，这样确保了布局自动占据浏览器的可用空间。对于最小宽度，可以使用像素值，如760 px。这个限制确保了所有自适应布局即使在最低的分辨率情况下仍保持可读。至于最大宽度，通常的做法是使用em值（例如90 em），这样就能在文本宽度不失控的情况下，保持不同分辨率情况下的稳定。让人高兴的是，如果用户调整浏览器的字体设置，最大宽度会发生相应的变化。

一个经典的计算这个比例的方法是，通过将给定像素高度元素与容器的尺寸相除，得到的字体大小（即上下文）。

在实现自适应布局时，使用了相对值来表示外边距和内边距（当时，是相对于视口的宽度），这样当窗口尺寸变化时，外边距和内边距同样发生变化，同时保持了比例和尺寸一直灵活。这种技术被称为“concertina padding”，由理查德·鲁特提出（“Web Standards Group ：Ten Questions for Richard Rutter”）。使用这种技术后，当页面尺寸改变时，外边距和内边距同样发生变化，同时会检查内容区以及文本行的长度。