为什么使用流式布局
流式布局可以满足不同分辨率的需求，特别是如今的移动设备和桌面设备在分辨率或是在视口大小上的差异都非常大，曾经经常使用的固定布局就会受到很大的局限。也许可以从媒体查询入手，不过它也具有局限性。那些仅使用媒体查询来适应不同视口的固定宽度设计，只会从一组CSS媒体查询规则突变到另一组，两者之间没有任何平滑，缺乏友好性。因此需要借助于百分比布局使网页呈现更为灵活，让页面元素根据视口大小在一个又一个媒体查询之间灵活伸缩修正样式。
开始尝试
通常，我们的设计都会在诸如Photoshop、FireWorks一类的软件中完成，其中度量元素的大小、边距或文字等都会以固定尺寸进行设计和标注。因此在编写CSS代码的时候就特别需要注意如何将一个固定尺寸转换为相对尺寸。可以通过一个简单的公式来解决这一问题：
目标元素宽度 / 上下文元素宽度 = 百分比宽度
以实际例子来说，假如我们正在编写的网页中header的宽度是940px，而设计中网页的总宽度是960px，这里目标元素就是header本身，上下文元素当然就是网页总的宽度，根据以上公式，实际结果就是0.979166667，即97.9166667%。这样我们会得到类似下例所示的CSS代码：
#header {
width: 97.91666667%;
}如果一个元素包含边距，我们也应该采用上面的方式进行计算和编码。
同样的，对于文字来说，以上公式依然有效。现代浏览器的默认文字大小都是16px（显示声明的除外）。而文字的相对大小采用的单位是em，它的实际大小总是相对于上下文的字体大小而言的。那加入有如下一个固定尺寸的CSS定义：
#logo {
font-size: 48px;
}通过计算：48 / 3 = 3，因此可以将该样式修改如下：
#logo {
font-size: 3em;
}怎么样？是不是很不错呢？那就从现在开始拥抱流式布局。
