响应式网页设计的基础

By Emily P. Lewis翻译: 亓光宇

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

background-color: #ccc;

2.

float: left;

3.

width: 31.25%;

4.

5.}

测试一下

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

比例宽度

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

图2 主页和顶部导航元素的像素宽度

按照 Ethan 的公式，整体宽度940px就是我的上下文宽度，根据它就可以确定所有元素的比例宽度.

Logo: 240 ÷ 940 = .255319148

主持人介绍: 436 ÷ 940 = .463829787

分享链接: 90 ÷ 940 = .09574468

随后我将这些浮点值转换成百分比值，运用到我的CSS中：

1.#logo a {

2.width: 25.5319148%; /* 240px / 940px */

3.}

4.#hosts {

5.width: 4

6.3829787%; /* 436px / 940px */

6.}

7.#push {

8.width: 9.574468%; /* 90px / 940px */

9.}

我没有对这些百分比值进行四舍五入，而是直接运用在CSS中。我也从来没有遇到过任何浏览器对这样精度的百分比值识别错误的情况(包括IE)。

同时，我为每一个百分比值都注释了计算它所用到的目标宽度和上下文宽度，这对于今后的开发来说是非常重要的参考。

确保你的上下文宽度是正确的

只要你的数学计算是正确的,那么将宽度值转化为比例值的过程就是很简单的,或者,更具体地说,只要你的上下文宽度是对的，那么你得到的比例值也就是正确的.

实战中, 我通过计算得到的比例值很少会出错，除非我将上下文宽度搞错了。

像图3中标示,主持人信息是一个包含

,

, 等元素的定义列表

，这些元素的宽度值各不相同。

图3

的宽度

刚开始计算的时候,我先用960像素作为我的上下文宽度,因此

的宽度比例为:

116 ÷ 960 = .120833333

但是这个比例值(12.0833333%)不是我要的正确尺寸.直到我意识到我的上下文宽度是不同的,我才得到了正确的比例值.

对于

来说，它的上下文元素实际是它的父元素

，宽度为436像素。因此我改变了一下参数，并计算出了我需要的百分比：

116 ÷ 436 = .266055045