响应式网页设计基础也是重点：灵活性

响应式网页设计最近讲了很多，源于这是一个近期网页设计的趋势。

在过去的一年里，如果你不是住在深山里，就一定知道响应式网页设计，它已经成为当今的主流。响应式设计是Ethan Marcotte提出的，概念很简单：使网站的页面布局能够根据不同设备和分辨率进行自动调整。

　　当我第一次了解到它时，我就立即被迷住了特别是media queries，我马上就用到我自己的个人兼职网站上。我甚至写了一篇文章介绍《如何使用CSS3 Media Queries响应不同设备》(强烈建议在读这篇文章之前读一下)。

　　在第一次尝试使用media queries后，我很快意识到我忽略了一个响应式设计的重点： 灵活性。

　　挑战固定宽度

　　我的个人兼职网站使用了固定宽度的设计，所有的width, margin和padding都使用了固定的像素值。 我一般都会这样写网站，因为对我来说它更简单，更快速。

　　但当我试图在我的固定宽度的网站上应用media queries的时候，那些简单和快速的优势全部都消失了。为什么?因为对于固定宽度的设计，我需要非常细致的定义media queries并在CSS文件中调整每个单独的像素值，基本上，我需要为每一种可能的分辨率都设计一个全新的布局，繁琐!慢!!还不好玩!!!

　　我有幸听了Marcotte先生在《In Control 2011》的演讲，他讨论了响应式设计的理论和最佳实践，诸如fluid grid(流体网格)实现方式。

　　流动且灵活的公式

　　流动式布局是灵活的。由于width，margin和padding(甚至字体和图像)使用了百分比和em(相对长度单位)，因此页面布局会随着浏览器的窗口变化而变化。随着分辨率的改变，布局会成比例地进行调整，实现过程中不需要用到任何media query。

　　这对于实现响应式网页设计来说简直太美妙了。如果我有一个基于比例值的布局，流动式的网格将替我完成大部分繁重的工作。我的media query将不再需要包含那些覆盖其他分辨率的所有width, margin和padding的样式定义。

　　但是也有一点让我感到头疼，计算流动式网格的比例宽度需要用到一些数学知识，我数学不太好…

　　幸运的是, Eth