响应式网页设计
使用打印机的设计师都明白，很多时候我们都希望打印页面可以像网页一样，因为打印机存在种种限制。我们必须接受这样的事实，网页设计的灵活性并不存在那样的限制。但是首先，我们必须接受事物的衰退和变化。—— John Allsopp，A Dao of Web Design（网页设计之道）
英国建筑师 Christopher Wren 曾打趣说，他所在的领域的就是“为了永恒”（aims for Eternity）。这句话的确很有吸引力，因为网页设计者则完全不同，经常会让人觉得是“为了下周”，因为建筑学讲究的就是持久性。
一座建筑物，其地基便决定了它占有多少面积，它的框架结构，以及它的外形。在建筑过程中，每一个阶段几乎是永恒的，不可变的。一个创造性的决策确实可以塑造一个物理空间来定义人们如何通行，但这样的定义可能会持续几十年甚至几个世纪。
而在网络领域，这些则是完全不同的。网络的定义都是极其短暂的，往往会在一两年内逐步完善或者完全取代。在发布的时候往往要考虑到不同的窗口大小，不同的屏幕分辨率，不同的用户喜好，以及用户安装的字体，这些因素无形中都在产生影响。经过这些年的磨练，网页设计师已经非常擅长这样做了。
然而这一切正在以超乎想象的发生转变，移动互联网的访问量将会在三至五年内超过桌面网络。三大游戏主机已经有两个内置了网络浏览器（其中一个还相当不错）。我们的设计对象将超越鼠标和键盘，融入 T9 键盘，游戏手柄，触控操作等等。总之，我们所面对的是更加庞大的设备群，输入方式，和各色浏览器。
近几年我更是收到很多公司的邀请，希望为他们制作一个 iPhone 版的网站，以作为他们项目的一部分。这个状况十分有趣：从表面来看，也确实如此，它说明了基于 WebKit 的移动浏览器在质量上已经可以比肩桌面浏览器了。当时作为一个设计师，我们经常为此而感到安慰，因为对方已经为我们划分了领域。我们被明确告知了是一个 iPhone 版的网站，一个完全不同的，独立的空间。但是接下来呢？一个 iPad 版的网站？一个 N90 的网站？难道我们真的要为每个不同的浏览器都做一套定制化的网站吗？在某种程度上，我们可以说这是一个零和游戏，然而作为设计师的我们应当如何适应呢？
可变式基础
让我们来做一个实例，假设我已经为一本杂志做了一个简单的页面。它是一个简单的两列流动布局，添加了一些 Flexible Image。作为固定布局的长期支持者，我一直认为 Fluid Grids 只是为了在“未来证明”布局是无关紧要的，在一定程度上也确实如此。流动设计使得无论什么浏览器，纵向还是横向，网页都可以灵活的适应。
总之，流动布局是以桌面系统为中心的设计，在此之外并没有对其他平台进行优化。
开始响应
最近，一个新型学科“响应体系”演示了一个物理控件如何根据在场人群在作出不同的响应。通过嵌入式机器人以及可拉伸材料，建筑师正在试验可弯曲的艺术装置和墙体结构，并且扩展到人群中以接近他们。当房间里有人的时候，运动传感器和气候传感器就会自动调整房间的温度和照明。一些公司已经开始采纳了“智能玻璃技术”，当达到一个阈值的时候玻璃就会自动变成不透明的，给用户更多的隐私。
在《交互建筑学》一书中，Michael Fox 和 Miles Kemp 将这种可灵活适应不同环境的装置描述为“多循环系统”（multiple-loop system），可以交流，并且连续不断的进行有用的信息交换。特别是我，我认为这和传统建筑是一个十分细小但是却强有力的区别。与其建造那些永恒不变的建筑，不如来定义一个特殊的用户体验，来让居民和建筑相互适应彼此。
这就是我们前进的方向。而不是区别不同的设备，我们可以把这些不同的设备看作是一种经验，以此来设计一个最佳的视觉体验，标准化的嵌入式技术不仅可以网页更加灵活，还可以更好的呈现多媒体内容。简言之，我们需要不断的练习响应式设计，但是怎么练呢？
多媒体的困惑
在 CSS2.1 之后，样式表已经可以根据媒体类型来进行一些设备识别。如果你编写过打印样式表，那么你也许会对此比较熟悉。
<br></br>
<link rel="stylesheet" type="text/css" href="core.css"<br></br><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;">media="screen" /></span><br></br><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"><link rel="stylesheet" type="text/css" href="print.css"</span><br></br><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;">media="print" /></span><br></br>```
- - - - - -
理论上我们可以设计出一套整齐的样式表，因为 CSS 规范为我们提供了很多[特定的媒体类型](http://www.w3.org/TR/CSS21/media.html#media-types)，每一种大都是为现有的网络设备提供支持。但并非所有的浏览器都遵守这样的规范，绝大多数浏览器[无法完全兼容](http://www.alistapart.com/articles/return-of-the-mobile-stylesheet)某些标签，或者根本就不兼容。
值得庆幸的是，W3C 已经将[ media queries ](http://www.w3.org/TR/css3-mediaqueries/ "media queries")作为 CSS3.0 的一部分，以改善对多媒体文件的支持。 media queries 使得不仅仅是对特定的设备进行匹配，而是查询该硬件是否支持对应的媒体类型。例如，近期逐步兴起的移动 Webkit，使得 media queries 在针对 iPhone，Android 以及衍生产品都有特定的样式表，因此我们可以将 media queries 合并到一个链接样式表中：
- - - - - -
href="shetland.css" />
```
query 组建一般包含两个部分：
媒体类型（screen）
实体 query 会对括号内的媒体特性（最大宽度）进行检查，随后给出目标值（480px）。
换句话说，对于设备的横向分辨率，要求最大不超过 480px，如果情况符合，比如说像 iPhone 这样的小屏幕设备，CSS 样式表将会被加载，否则，链接就会被完全忽略。
设计师已经尝试过使用适应不同分辨率（resolution-aware）的布局，主要是依赖于 JS-Driven 这样的解决方案，特别是像 Cameron Adams 那样优秀的脚本。但是 media query 规范提供了大量的媒体特性，并不仅限于屏幕分辨年率，这几大的拓展了我们的测试范围。更重要的是，你可以通过链接关键词来，在单个 query 中测试多个属性值：
<br></br>
<link rel="stylesheet" type="text/css"<br></br>
media="screen and (max-device-width: 480px) and (resolution: 163dpi)"<br></br>
href="shetland.css" /><br></br>```
- - - - - -
此外，我们不仅可以把 media query 纳入链接中，还可以将其纳入 CSS样式表 中，作为 @media 规则的一部分：
- - - - - -
@media screen and (max-device-width: 480px) {
.column {
float: none;
}
}
```
或者作为 @import 指令的一部分：
<br></br>
@import url("shetland.css") screen and (max-device-width: 480px);<br></br>```
- - - - - -
无论哪种方法所呈现的效果都是相同的，如果设备通过 meida query 的测试，那么相关标记的 CSS 就会被应用。总之，media query 就像是[有条件的注释（conditional comments）](http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx)，而不是特定版本的浏览器，我们可以在一开始就纠正错误的布局，以得出理想的分辨率。
### 从响应到克服
让我们来把注意力转到页面底部的图像上，在默认的布局中，相关的 CSS 看起来是这样子的。
- - - - - -
.figure {
float: left;
margin: 0 3.317535545023696682% 1.5em 0; /* 21px / 633px /
width: 31.121642969984202211%; / 197px / 633px */
}```
li#f-mycroft,<br></br>
li#f-winter {<br></br>
margin-right: 0;<br></br>
}<br></br>```
- - - - - -
我省略了一些排版特性，让我们把注意力集中在这里：每个图像的大小都被控制在列表里，而在右边，每行结尾的两张图片的 margin 被归零 (li#f-mycroft, li#f-winter)，结果非常出色，与原来的设计相比，图像本身看上更小或者更大。根据 media query，我们可以设置特定的分辨率，来适应我们的设计，从而更好的响应各种显示效果。
首先，我们需要定义一个阈值，一旦分辨率低于，比如说 600px，我们就在底部的样式表中新建一个 @media 模块，就像这样：
- - - - - -
@media screen and (max-width: 600px) {
.mast,
.intro,
.main,
.footer {
float: none;
width: auto;
}
}
```
如果你使用最新的桌面版浏览器去查看更新后的页面，将窗口缩小到 600px 以下，media query 将会禁用一些浮动的设计元素。文档就会自动下沉到底部，图片依然会智能的进行缩放。如果我们使用另一个 media query，则页面的布局也会相应的改变：
<br></br>
@media screen and (max-width: 400px) {<br></br>
.figure,<br></br>
li#f-mycroft {<br></br>
margin-right: 3.317535545023696682%; /* 21px / 633px */<br></br>
width: 48.341232227488151658%; /* 306px / 633px */<br></br>
} ```
li#f-watson,
li#f-moriarty {
margin-right: 0;
}
}
```
<br></br>
@media screen and (min-width: 1300px) {<br></br>
.figure,<br></br>
li#f-mycroft {<br></br>
margin-right: 3.317535545023696682%; /* 21px / 633px */<br></br>
width: 13.902053712480252764%; /* 88px / 633px */<br></br>
}<br></br>
}<br></br>```
- - - - - -
现在我们的图像可以在[两个极端分辨率](http://d.alistapart.com/responsive-web-design/ex/ex-site-larger.html)下都正常显示，根据窗口的分辨率来自动优化布局。
<div align="center">[](http://d.alistapart.com/responsive-web-design/ex/ex-site-larger.html)
*通过制定一个新的 media query，我们可以将图片展示在[同一行](http://d.alistapart.com/responsive-web-design/ex/ex-site-larger.html)。*</div>但这才刚刚开始，将 media query 嵌入 CSS 中可以改变的不仅仅是几张图片的位置，我们可以推行[新的自适应布局（alternate layouts）](http://d.alistapart.com/responsive-web-design/ex/ex-site-FINAL.html)，来控制每一个像素的位置。比如说在宽屏显示中令导航栏更加突出，或者在低分辨率下对其重新布局。
<div align="center">[](http://d.alistapart.com/responsive-web-design/ex/ex-site-FINAL.html)
*通过一系列的设置，我们不仅可以使小型设备上的内容线性化，同时还可以优化[多种分辨率](http://d.alistapart.com/responsive-web-design/ex/ex-site-FINAL.html)的显示。*</div>当然，设计并不仅限于更改页面的布局。Media query 允许我们更加精准的控制页面，让页面自行改变外形。在小屏幕上，我们可以增加链接区域的空间。对于触摸设备更好的遵循[费茨法则](http://zh.wikipedia.org/wiki/%E8%B4%B9%E8%8C%A8%E6%B3%95%E5%88%99)（[Fitts’s law](http://en.wikipedia.org/wiki/Fitts'_law)），选择性的显示隐藏或者强调页面的导航元素。我们甚至可以根据[响应式排版](http://d.alistapart.com/responsive-web-design/ex/ex-article.html)来改变文本和标题的大小，对阅读体验提供进一步优化。
### 一些技术说明
值得一说的是 media query 在最新的浏览器中已经得到了广泛的支持，桌面浏览器比如 Safari3+，Chrome，Opera7+，Firefox3.5+ 都支持本地解码 media query，移动版浏览器比如 Opera Mobile 和多数使用 WebKit 的浏览器也同样支持 media query。那些旧版的浏览器是无法支持 meida query，微软虽然致力于将 [IE9 支持 media query](http://ie.microsoft.com/testdrive/HTML5/85CSS3_MediaQueries/Default.html)，但是目前 IE9 并不能进行本地解码。
当然，如果你对传统浏览器支持 media query 很感兴趣，那么 JavaScript-tinted 可以为你提供帮助。
在 2007年 的时候，[一个 jQuery 插件](http://plugins.jquery.com/project/MediaQueries)对旧版浏览的 meida query 提供了有限的支持，当遇到到一个独立的 link 元素的时候，仅仅可以识别最大宽度（max-width）和最小宽度（min-width）属性。
在最近，[css3-mediaqueries.js](http://code.google.com/p/css3-mediaqueries-js/)发布了，它承诺会让 IE5+，Firefox1+ 和 Safari2 都完全支持解析，测试和应用 CSS3 中的 media query，当然也包括 @media。在试用了 1.0 版本之后我发现这个插件运行相当稳定，我打算继续观察。
如果 JavaScript 不管用，那也是情有可原的。然而，在构建一个足够强大，[灵活布局](http://www.alistapart.com/articles/fluidgrids/)的同时，确保你的设计也兼顾到了那些不支持 media query 特性的浏览器和设备。
## 未来之路
Fluid grids，flexible images 和 media queries 是响应式网页设计的三大技术，但是这样需要一种不同寻常的思维方式。与其为每一种特定设备优化页面，不如使用 media query 来提高我们的工作效率。这并不是说所有的商业网站都这样，如果你的移动网站的用户群比较固定，那么针对特定的设备进行优化就会是最佳选择。
我们并需要将这种思维模式设置为默认，因为现在的设计比以往任何时候都需要紧跟潮流，响应式网页设计为我们提供了一个出路，让我们可以设计一些“过时和变动的东西”。
<div class="about">### 关于作者
[](http://alistapart.com/author/emarcotte)
Ethan Marcotte 是一个网页设计师和开发人员，他经常关注漂亮的设计，优雅的代码，而且常常会将二者穿插在一起。近些年，他的客户包括：圣丹斯电影节，斯坦福大学，纽约杂志（New York Magazine）和《今日》（The Today）。[他在 Twitter](http://twitter.com/beep) 上说，他小时候的梦想是成为一个[无人可挡的机器人忍者](http://unstoppablerobotninja.com/)。他最新的书籍是[响应式网页设计](http://www.abookapart.com/products/responsive-web-design)。
更多来自 Ethan Marcotte 的文章：[Fluid Images](http://alistapart.com/article/fluid-images)， [Fluid Grids](http://alistapart.com/article/fluidgrids)， [Where Our Standards Went Wrong](http://alistapart.com/article/whereourstandardswentwrong)
</div>**翻译：**Max Cheung
**原文链接：**[Responsive Web Design](http://alistapart.com/article/responsive-web-design)