9.4.2 弹性网格
当页面需要适应各种尺寸的设备时，就应该使用弹性网格，让整个布局结构根据用户行为，以及设备环境进行响应式调整。
弹性网格是一个网格系统，它参考流式布局中网格系统的设计，将每个格子设置为百分比宽度，以便网格的宽度会随时根据浏览器窗口大小做出相应的调整。
那如何将固定宽度的网格系统，转换成弹性网格系统对应的百分比宽度呢？响应式设计之父 Ethan Marcotte 提供了一个简单易行的公式：
目标元素宽度 ÷ 上下文元素宽度 = 百分比宽度
先不要被这个公式吓到，在创建响应式布局时，它很快就会成为你的得力助手。先看看下面的设计，如何把它从固定宽度转换为百分比宽度：
<body>
<div id="wrapper">
<main></main>
<aside></aside>
</div>
</body>这个页面相对简单，在一个 id = "wrapper" 的容器中，包括主内容区 main 和侧栏 aside两部分。采用固定布局的CSS代码如下：
#wrapper {
margin: 10px auto;
width: 1000px;
}
aside {
width: 200px;
float: left;
}
main {
width: 780px;
float: right;
}上述代码中的所有尺寸，都使用像素值。页面的所有内容都包裹在一个 id = "wrapper" 的div 容器中，div 被设置为居中显示。容器的宽度为1000px，main 和aside 的宽度分别为 780px 和 200px。
要将固定宽度的网格系统，转换成弹性网格系统。首先，以视口的总宽度为基准，把页面容器的宽度转换为百分比宽度。然后，再以容器的宽度为基准，把子元素的固定像素宽度，转换为对应的百分比宽度。
现在，可以使用上面的公式，将固定宽度改成百分比宽度。外层的容器，将以窗口的总宽度为基准，定义其百分比宽度。假设对于宽度为 1024px 的屏幕，套用上面的计算公式，计算百分比宽度：
1000px ÷ 1024px = 97.65625%
得到的准确宽度为97.65625%，这样的话，得到的宽度跟固定宽度将完全相同。当然，你也可以选择 100% 或者 96%，以保证达到最佳的视觉效果。
接下来，再将里层的元素从固定宽度转换为百分比布局，由于 main 和aside 都包裹在#wrapper容器中，此时，main 和 aside 就是目标元素，#wrapper 则是上下文元素。得到 main 的百分比为：
780px ÷ 1000px = 78%
同理，计算出 aside 的百分比为 20%。经过上述一番转换之后，页面的基本结构都变成了百分比布局，相应的CSS代码如下：
#wrapper {
margin: 10px auto;
width: 97.65625%;
}
aside {
width: 20%;
float: left;
}
main {
width: 78%;
float: right;
}如果 main 和 aside 也包含子元素，则使用相同的方法进行计算，只是上下文元素会随之发生改变。对于 main 的子元素，上下文元素就是 main 元素，对于 aside 的子元素，上下文元素就是 aside 元素，依次类推。