响应式网页设计基础：灵活性

在过去的一年里，如果你不是住在深山里，就一定知道响应式网页设计，它已经成为当今的主流。响应式设计是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的样式定义。 

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

幸运的是, Ethan 提供了一个很简单（即便对我来说）的公式来计算比例宽度: 

目标宽度÷上下文宽度=结果（比例宽度） 

这个公式用子元素的像素宽度（目标宽度）除以它父元素的像素宽度（上下文宽度），得到的结果就是这个子元素的比例宽度。 

图1 实例：目标宽度（300px)和上下文宽度（960)像素 

在图1中,例如,深灰色区域宽度为300px，包含在宽度为960px的浅灰色区域中.这里,960像素区域是上下文元素,300像素区域是目标元素,所以我们的数学公式是: 300 ÷ 960 = 0.3125 

0.3125这个结果需要变成浏览器可识别的数值, 因此需要转化成一个比例值, 将小数点右移两位，变成31.25% 即可。然后在CSS中,将元素的宽度设定为这个比例值: 

1. 		aside{  

2. background-color:#ccc;  
3. float:left;  
4. width:31.25%;  
5. }  

测试一下 

公式虽然看起来很简单，但我知道必须在实际的网站中检验一下才行。幸运的是，我最近加入了EE播客，正在重新设计那个网站。当我的搭档给我她的 PS 设计文件时，我就决定将它打造成灵活布局的网站。 

比例宽度 

我首先记录下所有元素的像素宽度。（在排版设计事，我们没有严格遵循网格布局，这也是我建议的做法）正如你在图2中看到的。整体宽度为940像素，Logo，主持人介绍和分享链接都有它们各自的像素宽度。