CSS3 响应式布局实例
掌握了响应式设计的核心技术之后，你可以迫不及待想要使用它来构建响应式网站了。也许你会认为响应式设计有点复杂，但事实上，它比你想象的要简单。
下面通过构建一个响应式的页面基本布局，让你快速了解如何使用响应式设计技术来构建响应式网站。
首先，创建HTML结构和页面布局。
最常见基本布局将页面划分为 4 个部分，分别是头部、主内容区、侧边栏和页脚，而主内容区和侧边栏一般都会包含在一个容器中。如：
header mainaside
footer如果一个元素的宽度为 auto 或百分比，它就具有响应性，它就会随着浏览器窗口尺寸的改变，而自动调整宽度。这里将主内容区的宽度为 78%，侧边栏的宽度为 20%，而 header 和 footer使用自动宽度，无需进行设置。
main {width: 78%;float: left;}aside {width: 20%;float: right;}
由于 #wrapper 只包含浮动元素，可以通过 overflow: hidden 来创建一个块格式化上下文，让它能够包含浮动元素。再为它设置适当的外边距，让各个元素之间泾渭分明。
#wrapper {margin: 10px auto;overflow: hidden;}
为了方便查看效果，让头部、主内容区、侧边栏、页脚都具有 40px 的固定高度和 1px 的实线边框。
header, main, aside, footer {height: 40px;border: 1px solid #ccc;}
其次，通过 meta 标签，设置视口的宽度，并禁止默认缩放。
视口（viewport）指的是浏览器（包括桌面浏览器和移动浏览器）显示页面的区域，它只是浏览区域，并不包含地址栏、按钮等区域。媒体查询中的 width 特性指是视口的宽度，而 device-width特性指的是屏幕的宽度。
在大多数移动设备上，默认情况下，这两个值通常不一样。如，iPhone的视口区域默认是 980 像素宽，而它的屏幕只有 320 像素宽。因此，iPhone 会按980 像素宽来显示页面，并将页面缩小，以适应 320 像素的屏幕宽度，就会显示为网站缩小后的样子。
幸运的是，在页面的头部添加 meta 元素，可以使该问题迎刃而解：
这段代码的重点是 width=device-width，它将视口的宽度设置为设备的屏幕宽度，来让网页的宽度自动适应移动设备的屏幕宽度。而 initial-scale=1.0 表示页面按实际尺寸显示，不进行缩放。
在移动设备的浏览器上，通过添加 user-scalable=no，可以禁用其缩放功能。禁用缩放功能后，用户只能滚动屏幕，这样能让你的网站看上去更像原生应用。但并不推荐所有的网站都使用这种方式，是否使用这种方式要视情况而定。
最后，设置断点，让布局适应不同视口宽度。
通过媒体查询设置不同的断点，为不同的视图宽度指定不同的CSS规则，让浏览器根据指定的视图宽度渲染页面，来实现响应式布局。
可以根据需要添加任意多个媒体查询断点，为了简单起见，这里只添加一个断点。如，希望在视口宽度小于等于 480px 时，将 main 和 aside 的宽度设置为 auto 并取消浮动，让它们全屏显示：
@media screen and (max-width: 480px) {main {width: auto;float: none;}aside {width: auto;float: none;margin-top: 10px;}}
针对不同的屏幕尺寸定义媒体查询后，用户在改变浏览器窗口大小的过程中，浏览器会根据视口的尺寸自动重新渲染页面。
如，当视口宽度大于 480px 时，main 和 aside 在一行内显示，并各占一栏，宽度分别为 78% 和 20%。运行结果如图 9‑22 所示：
图9-22 视口宽度大于480px时的布局效果
当视口宽度小于 480px 时，main 和 aside 都全屏显示，各自独占一行。运行结果如图 9‑23 所示：
图9-23 视口宽度大于480px时的布局效果
当然，构建响应式网站要考虑的因素很多，远比这个要复杂。本实例仅仅是抛砖引玉，只简单介绍了构建响应式网站的基本过程，要了解响应式设计的更多技术，还要阅读专门介绍响应式设计的书籍，如《响应式Web设计：HTML5和CSS3实战》等。