响应式网页设计的基础

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?{

2. background-color:?#ccc;

3. float:?left;

4. width:?31.25%;

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

的宽度比例为: 116 ÷ 960 = .120833333 但是这个比例值(12.0833333%)不是我要的正确尺寸.直到我意识到我的上下文宽度是不同的,我才得到了正确的比例值. 对于
来说，它的上下文元素实际是它的父元素 ，宽度为436像素。因此我改变了一下参数，并计算出了我需要的百分比： 116 ÷ 436 = .266055045 如果你计算的比例宽度有任何问题，请先检查一下选定的上下文宽度是否正确，这会帮你省不少事。 成比例的字号 我将https://www.360docs.net/doc/7015160680.html,变得更加“灵活”的第二步是使用比例字号，它和比例宽度的道理是相同的：将固定的像素值变成比例值，字体的比例值使用em进行计算. 要计算比例em，使用相同的公式(目标宽度÷上下文宽度 = 结果)即可,字体的上下文宽度就是它基本字号，通常在body元素中定义： 1.body?{ 2.font:?100%/1.5?"Open?Sans",?Arial,?Helvetica,?sans-serif; 3.} 大多现代浏览器的基本字号是16px，如果你设定的比例字号是100%，字号同样也是16px. 现在，我们来考虑一下主持人名字的字号，在版式设计时设定的是12px，使用公式12÷16=.75就得到了它的em值。这个浮点数不用转换成百分比值就能直接在CSS中使用： 1.#hosts?dd?{ 2.font-size:?.75em; /*?12px?/?16px?*/ 3.} 成比例的padding和margin 对于padding和margin来说,那个神奇公式同样有效. 让我们考虑一下主持人信息当中，右margin被设定为20像素的 元素(图3).为了得到这个margin的比例值,我使用了和计算比例宽度相同的公式: 20 ÷ 436 = .04587159 将小数点右移两位,得到的百分比值可用到CSS中： 1.#hosts?dt?{ 2.margin-right: 4.5871559%;?/*?20px?/?436px?*/ 3.width:?26.6055045%;/*?116px?/?436px?*/ 4.} 对于padding的计算来说也是一样。 图4 主区域的横向padding https://www.360docs.net/doc/7015160680.html,的主区域（如图4所示）的宽度为940px，同时左右各有40px的横向padding。我使用目标宽度(40px)除以上下文宽度(940px)得到它们的比例宽度： 1.header,?footer,?.wrap?{? 2.padding-right: 4.25531%;?/*?40px?/?940px?*/ 3.padding-left:? 4.25531%;?/*?40px?/?940px?*/ 4.width:?79.3%; 5.} 特例 这个公式对于横向padding比例宽度的计算有一个特例：对于padding而言，上下文元素永远都是这个元素本身，无论父元素的宽度是多少。 例如图5所示的分享链接,文字左侧均有25像素的横向padding来放图标. 图5 padding的上下文宽度 计算此padding的比例值时,应将这个元素本身的宽度(90px)作为上下文宽度，而不是父元素的宽度940px.（图2） 25 ÷ 90 = .277777777 因此padding的百分比值设定为: