响应式互联网设计【A List Apart杂志第306期】

译者 Aitch Ren

2010年5月25日

伊森·马考特（Ethan Marcotte）

“在印刷媒体中设计师拥有一种熟悉的掌控感，从而常常渴望在互联网上也能同样地掌控全局。然而这种掌控其实只是实体印刷页面本身固有的一种局限而已。互联网恰恰没有这种局限，所以我们因该拥抱它给设计带来的自由天地。但首先，正如老子所说，万物作而弗始，生而弗有——我们应该先接受事物生灭的规律。”

——约翰·阿尔索普（John Allsopp）《互联网设计之道》( A Dao of Web Design)

英国建筑师克里斯托弗·列恩（Christopher Wren）曾打趣地说他所选择的建筑业“意在永恒”——多么引人入胜！我们的互联网业则常让人感觉“意在下周”。建筑的定义很大程度上取决于它的永久性。基础决定平面，平面决定构架，构架又塑造立面，建筑设计流程的每一个进阶都有着越来越强的不可变性。创作上的每一个决定都造就着一个实实在在的空间，规划着人们如何地在这空间的范围内活动，年复一年，世纪更迭。

相比之下，互联网的设计则全然不同。我们工作的定义取决于互联网的短暂性，常常在一两年内就需要细化更改或取代。当我们发表作品时，需要和太多无形的变量进行协商——视窗的尺寸、屏幕的分辨率、用户的个人定义、系统的自带字体，这些仅仅是其中的几个例子。而多年来，我们已经非常娴熟地适应了这个过程。

然而这一切也正在改变，改变的速度也许比我们愿意接受的要快。移动终端浏览量可望在 三年到 五年内超过固定终端。三大主导游戏设备中有两个已经自带了浏览器（而且 其中一个非常优秀）。我们正在为鼠标键盘、T9智能输入、手持游戏机、触摸屏等形形色色的终端进行互联网设计。总之，我们所面对的电子设备、输入法则和浏览软件的数量已经是史无前例的了。

这几年，我的客户中越来越多的公司要求在他们的项目中加上一个独立的“iPhone网站”。这个提法很有趣，表面上它肯定了移动WebKit作为浏览器引擎的高质量，并且反映了对固定电脑终端的超越是个强大的商业趋势；但作为一名设计师，我感到是我们需要检讨自己为何经常依赖这样的要求来帮助我们把要解决的问题划分为小块。我们常用 子域名来把移动终端对网站的要求与那个“非移动网站”划分开来。但下一步呢？再加一个“iPad网站”？再加一个“诺基亚N90”网站？我们真的可以继续为每一个新的用户终端定量身定做吗？这个游戏开始越来越象一场没有建设性的零和博弈。我们和我们的设计到底应该如何应对？

以弹性为基础

我们来看一看这个 设计范例吧。我建立了一个假想的杂志网页，一个以 流动性网格为基础的简单双栏布局，加上若干 弹性图片分布在页面中。我一直倡导非固定式布局，认为这种布局因其不确定性而更能经受未来的考验。弹性设计不对浏览器的宽度作任何假设，因而能优雅地适应不论是水平式的还是竖直式的终端设备。

图1：大尺寸的图片会以超大尺寸显示。我们的这个设计布局尽管是弹性的，但对于分辨率和视区（Viewport）尺寸的变化不能很好地响应。

然而，无论是固定式还是非固定式布局，没有一种设计能够超越其原本所意图的媒介环境而天衣无缝地进行伸缩。这个 范例在较大的浏览器窗口改变尺寸的时候能完全伸缩自如，但当分辨率降低时压力马上就出现了。在小于800x600的分辨率之下，左上角题标背后的插画边缘很快被裁去，导航部分的文字的分行变得很不雅观，而右下侧的图片则缩小到难以辨认的地步。而同样受到影响的不仅仅是低分辨率的一端，在宽屏显示器中图片则很快变成笨重的超大尺寸，令周围的文字内容不堪排挤。

总之，我们的弹性设计在以普通电脑显示屏为出发点的环境下能够游刃有余，但超出这个范围之外优化程度就很低了。

向响应式发展

近来一种叫“响应式建筑”的新兴专业正开始探讨实体空间应该如何对身处其间的人进行响应的问题。建筑师们结合嵌入式机器人技术和可拉伸的材料，对 艺术装置和 墙体结构进行实验，使其在人群接近的时候能够弯曲、伸缩或扩张。同时将气候控制系统与运动感应器结合还能够根据空间所容纳的人数多少来调节室温和环境光。某些公司已研制了“ 智能玻璃技术”，这种玻璃能够在室内人数达到一定密度的时候变为不透明以增加私密性。

迈克尔·福克斯（Michael Fox）和迈尔斯·坎普（Miles Kemp）在《交互建筑》（Interactive Architecture）一书中把这种适应性较强的方法描述为“一种多次循环的系统，这个系统就是一次对话，一次持续而建设性的信息交流。”我理解的重点在“持续而建设性的信息交流”上，因为这里有一个微妙而又强有力的区别：与其为特定的空间体验而创建不可变的空间，他们的建议是人和建筑能够并且应该相互进行影响。

这就是我们的出路。与其为越来越多不同的互联网设备量身定做一个个相互割裂的设计， 我们应该把这些设计需要当作同一个体验的不同层面来处理。我们的设计可以针对一个理想的视觉体验，而同时嵌入各种基于互联网标准的技术使其更有弹性，更能适应不同媒介的呈现。简言之，我们应该推行响应式互联网设计。然而，应该如何开始呢？

引入媒介查询(media query)

自从CSS 2.1开始，我们的样式表逐渐从媒介类别（ media types）中取得了一些终端设备的意识。如果你写过 打印样式表，那你已经熟悉这个概念了：

<link rel="stylesheet" type="text/css" href="core.css"
  media="screen" />
<link rel="stylesheet" type="text/css" href="print.css"
  media="print" />

为了能使设计的适用范围不仅局限于格式整齐的打印件，CSS的规范中包括了相当多的 可适用媒介类别， 分别为各种特定的互联网终端设备所设计。然而大多数浏览器和设备并没有真正地支持规范中的实质精神，致使许多媒介类别 没有得到完善的实施，有的甚至完全被忽视。

值得庆幸的是W3C在CSS3的规范中创建了媒介查询（ media queries），用以在媒介类别的基础上加以改善。媒介查询使我们不仅能针对某些特定的设备类型，还能够对呈现设计的设备的物理特性进行检验。比方说近来随着移动WebKit的普及，媒体查询就已成为一项很常用技巧，用以向iPhone、安卓及其他类似的移动系统提供定制的样式表。具体方法是在链接样式表的媒介属性中加上这样一个查询：

<link rel="stylesheet" type="text/css"
  media="screen and (max-device-width: 480px)"
  href="shetland.css" />

这个查询中包含两个部分：

1. 媒介类别——屏幕（screen），以及
2. 括号中的查询内容，包括具体需要检验的媒介特性——最大设备宽度（max-device-width），以及紧跟其后的目标数值（480px）。

查询以简明的英语表明我们需要检验设备水平方向的最大分辨率（max-device-width）是否480px。如果检验通过——也就是说，如果设计确实是呈现在类似iPhone的小屏幕上——那么设备则载入指定的样式表shetland.css。否则，这个链接则被忽略。

设计师们以往也试验过具有分辨率意识的布局，不过那些试验大多依赖于JavaScript驱动的方法，比如卡梅伦·亚当斯（Cameron Adams）的 绝妙程序。然而媒介查询则明确地提供了 一系列媒介属性，不仅止于屏幕分辨率而已，从而大大地扩展了查询的可能范围。并且，你还可以用一次查询同时检验多项属性的数值，用关键词and把多个查询内容连接在一起：

<link rel="stylesheet" type="text/css"
  media="screen and (max-device-width: 480px) and (resolution: 163dpi)"
  href="shetland.css" />

除此之外，我们不仅能够把媒介查询放置在链接（link）之中，还可以用@media法则在CSS样式表内进行媒介查询：

@media screen and (max-device-width: 480px) {
  .column {
    float: none;
  }
}

或者作为@import输入指令的一部分：

@import url("shetland.css") screen and (max-device-width: 480px);

以上的每一个例子，效果其实都是一样的：一旦设备通过媒介查询的检验，相关的CSS样式表即施加到源码上。媒介查询简言之就是我们设计师的条件注释（ conditional comments）。不同的是我们并非针对某个浏览器的某个版本，而是随着设计布局逐渐超越其初始的理想分辨率，对产生的问题进行有意识的矫正罢了。

改变、响应和征服

来看看我们最初的设计的页面中的那些基本图片吧。在默认状态的布局下，相关的CSS是这样的：

.figure {
  float: left;
  margin: 0 3.317535545023696682% 1.5em 0;   /* 21px / 633px */
  width: 31.121642969984202211%;             /* 197px / 633px */
}

li#f-mycroft,
li#f-winter {
  margin-right: 0;
}

在这里我省略了一些字体上的定义而把焦点集中在布局上：每一个.figure类别的图片元素都定义在包含其在内的栏宽的三分之一左右，最右边的两个图片（li#f-mycroft和li#f-winter）的右侧外边距（margin）定为零。这个设置只要在视区（viewport）的大小与初始设计目标比较没有太大改变的情况下都能呈现得比较好。有了媒介查询，我们就可以作与分辨率相关的局部调整，使设计方案能更好地适应显示设备的变化。

首先，我们把视区在某一分辨率界限值（比如说600px）以下的页面作线性调整。所以在样式表的下方我们加上一段@media定义，如下：

@media screen and (max-width: 600px) {
  .mast,
  .intro,
  .main,
  .footer {
    float: none;
    width: auto;
  }
}

如果你在一个标准的现代台式电脑浏览器内打开我们 更新了的设计页面，将视窗缩小到600px以下，媒介查询会取消页面主要元素的悬浮属性，并将其依照文件顺序竖向堆叠起来。这样，我们的设计的小型版就成型了，只是其中的图片仍旧不能智能地伸缩。如果我们引进另一个媒介查询，便能够做出相应的改变了：

@media screen and (max-width: 400px) {
  .figure,
  li#f-mycroft {
    margin-right: 3.317535545023696682%;    /* 21px / 633px */
    width: 48.341232227488151658%;          /* 306px / 633px */
  }

  li#f-watson,
  li#f-moriarty {
    margin-right: 0;
  }
}

图2：我们的人像图片能够响应性地改变布局以更好地 适应小屏幕的呈现。

不用介意这里毫无规则的百分数，我们只是修改了早先的弹性网格以适应新的线性布局。总之，这里我们在视区宽度小于400px的情况下 把三栏式的布局变为双栏式，从而使图片显得更为突出。

事实上，我们也可以用同样的方法来处理宽屏的情况。在高分辨率下可以采用 六个一排的方式排列所有的图片：

@media screen and (min-width: 1300px) {
  .figure,
  li#f-mycroft {
    margin-right: 3.317535545023696682%;    /* 21px / 633px */
    width: 13.902053712480252764%;          /* 88px / 633px */
  }
}

这样我们的图片在分辨率的 高端和低端都能够优雅地呈现，从而能随着视窗宽度和设备分辨率的改变优化页面布局。

图3： 通过新的媒介查询定义一个较宽的最小宽度值，我们成功地将图片调整成 横排式布局。

然而，这仅仅是个开端。利用嵌入CSS的媒介查询，可以改变的远远不止几个图片的位置，我们可以为每个分辨率区间选择性地引入 不同的布局设计，可以在宽屏模式下让导航部分更为突出，或者在小型屏幕中将导航移到题标之上。

图4：通过响应式设计，我们不仅能够在小型设备中线形化地组织内容，还能够在 一系列不同的显示设备上将设计做到最优化。

其实响应式设计并不仅限于改变布局。通过媒介查询我们能够相当精确地对页面进行重构：包括在小屏幕上扩大链接的目标区，从而更好地遵循触摸屏的费茨定律（ Fitts' Law）；包括对某些元素有选择性地显示或隐藏，从而改善页面的导航功能；还包括设置 响应式排字法，渐进地改变字体大小和行距，从而为显示设备提供最优化的阅读体验。

技术上的几点注释

应当指出的是标准的现代浏览器对媒介查询的支持度是相对高的。台式电脑浏览器中例如Safari 3以上、Chrome、Firefox 3.5以上，以及Opera 7以上都自带媒介查询解析，近年的移动浏览器中Opera和WebKit也一样。当然，那些台式机浏览器的旧版本就无法支持媒介查询了。而微软尽管承诺了要 在IE 9中支持媒介查询，但目前为止Internet Explore仍没有出台自带的媒介查询功能。

不过，对旧版浏览器的媒介查询支持有兴趣的，可以在JavaScript中找到一线希望：

1. 2007年的 一个jQuery插件可以实现一些有限的媒介查询，只在单独链接中支持媒介属性里的最小宽度和最大宽度。
2. 近期推出的 css3-mediaqueries.js代码库承诺了要为IE 5以上、Firefox 1以上以及Safari 2提供通过@media解析、测试和应用媒介查询的能力。尽管这一技术还比较稚嫩，但我个人认为它的功能颇为强大，有意关注它的进一步发展。

当然有的人不愿意使用Javascript，也很可以理解，这就反而证明了以 弹性网格为基础的布局的重要性了，因为在无视媒介查询的设备和浏览器中这样的设计才能保证享有一定的灵活性。

未来的路

流动网格、弹性图片和媒介查询是响应式互联网设计的三大技术成分，但是崭新的思路也是必不可少的。与其把同样的内容割裂成不同设备专属的体验，我们可以通过媒介查询，渐进增强式地将一个设计在不同的阅读环境中加以优化。这么说并不是要绝对否定在任何情况下使用针对特定设备的独立网站，比如当移动用户在你的网站上的商业目的相比固定电脑用户要单一得多的时候，为两种情况分别输送不同的内容可能是最好的方法。

然而我们也不需要固守在那样的设计思路里。如今越来越需要我们的设计能够呈现在一系列多种多样的体验之中。响应式设计为我们指出了一条未来的路，是我们终于可以依照万物生灭的规律来进行设计了。

A List Apart 杂志 及文章作者授权翻译。

关于作者

伊森·马考特，互联网设计师和开发者，深入关注完美的设计、优雅的代码，以及两者的相互关系。多年来伊森与包括圣丹斯电影节、斯坦福大学、纽约杂志和今日秀等客户合作愉快。他 在推特上嘻笑怒骂，希望长大了能够成为 势不可挡的机器忍者。他最近出版的著作是《 响应式互联网设计》。