响应式网页设计

产品

使用打印机的设计师都明白,很多时候我们都希望打印页面可以像网页一样,因为打印机存在种种限制。我们必须接受这样的事实,网页设计的灵活性并不存在那样的限制。但是首先,我们必须接受事物的衰退和变化。—— John Allsopp,A Dao of Web Design(网页设计之道)

英国建筑师 Christopher Wren 曾打趣说,他所在的领域的就是“为了永恒”(aims for Eternity)。这句话的确很有吸引力,因为网页设计者则完全不同,经常会让人觉得是“为了下周”,因为建筑学讲究的就是持久性。

一座建筑物,其地基便决定了它占有多少面积,它的框架结构,以及它的外形。在建筑过程中,每一个阶段几乎是永恒的,不可变的。一个创造性的决策确实可以塑造一个物理空间来定义人们如何通行,但这样的定义可能会持续几十年甚至几个世纪。

而在网络领域,这些则是完全不同的。网络的定义都是极其短暂的,往往会在一两年内逐步完善或者完全取代。在发布的时候往往要考虑到不同的窗口大小,不同的屏幕分辨率,不同的用户喜好,以及用户安装的字体,这些因素无形中都在产生影响。经过这些年的磨练,网页设计师已经非常擅长这样做了。

然而这一切正在以超乎想象的发生转变,移动互联网的访问量将会在五年内超过桌面网络。三大游戏主机已经有两个内置了网络浏览器(其中一个还相当不错)。我们的设计对象将超越鼠标和键盘,融入 T9 键盘,游戏手柄,触控操作等等。总之,我们所面对的是更加庞大的设备群,输入方式,和各色浏览器。

近几年我更是收到很多公司的邀请,希望为他们制作一个 iPhone 版的网站,以作为他们项目的一部分。这个状况十分有趣:从表面来看,也确实如此,它说明了基于 WebKit 的移动浏览器在质量上已经可以比肩桌面浏览器了。当时作为一个设计师,我们经常为此而感到安慰,因为对方已经为我们划分了领域。我们被明确告知了是一个 iPhone 版的网站,一个完全不同的,独立的空间。但是接下来呢?一个 iPad 版的网站?一个 N90 的网站?难道我们真的要为每个不同的浏览器都做一套定制化的网站吗?在某种程度上,我们可以说这是一个零和游戏,然而作为设计师的我们应当如何适应呢?

可变式基础

让我们来做一个实例,假设我已经为一本杂志做了一个简单的页面。它是一个简单的两列流动布局,添加了一些 Flexible Image。作为固定布局的长期支持者,我一直认为 Fluid Grids 只是为了在“未来证明”布局是无关紧要的,在一定程度上也确实如此。流动设计使得无论什么浏览器,纵向还是横向,网页都可以灵活的适应。

[![](https://i1.wp.com/d.alistapart.com/responsive-web-design/fig/f-img-default-wide.jpg?resize=540%2C265)](http://d.alistapart.com/responsive-web-design/ex/ex-site-flexible.html) *大的图象依然巨大,而我们的流动布局,并没有依据窗口的变动来正确的表现图像的分辨率或视图大小*
然而无论是固定布局还是流动布局,都不能无缝的将图像扩展到上下文以外。该示例的设计完全是为了响应窗口大小,如果夸张一点,将窗口分辨率缩小到比 800×600 还小,那么 Logo 后面的图片就被修剪掉一部分。导航栏的文字则是变得十分凌乱,而且底部的图像会过于紧凑而显得十分锐利。不仅是在低分辨率下,在一些宽屏显示器中,图像会变大而挤出网页边框。

总之,流动布局是以桌面系统为中心的设计,在此之外并没有对其他平台进行优化。

开始响应

最近,一个新型学科“响应体系”演示了一个物理控件如何根据在场人群在作出不同的响应。通过嵌入式机器人以及可拉伸材料,建筑师正在试验可弯曲的艺术装置墙体结构,并且扩展到人群中以接近他们。当房间里有人的时候,运动传感器和气候传感器就会自动调整房间的温度和照明。一些公司已经开始采纳了“智能玻璃技术”,当达到一个阈值的时候玻璃就会自动变成不透明的,给用户更多的隐私。

在《交互建筑学》一书中,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 合并到一个链接样式表中:

- - - - - -




media="screen and (max-device-width: 480px)"

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;


}


}

```


[![](https://i0.wp.com/d.alistapart.com/responsive-web-design/fig/f-img-narrow.jpg?resize=270%2C270)](http://d.alistapart.com/responsive-web-design/ex/ex-site-mini.html) *我们的图像可以更好的适应小屏幕*
不要介意难看的比例,我们只是重新计算[Fluid Grids](http://www.alistapart.com/articles/fluidgrids/)的宽度,来产生新的布局。当网页的宽度小于 400px 时,网格将会从[三列变为两列](http://d.alistapart.com/responsive-web-design/ex/ex-site-mini.html),使图像更加突出。其实宽屏显示的时候我们也可以这么做,对于像素较高的屏幕,我们可以把采取六列的布局,把图像全都放在同一行:
<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">[![](https://i2.wp.com/d.alistapart.com/responsive-web-design/fig/f-img-widescreen.jpg?resize=540%2C240)](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">[![](https://i1.wp.com/d.alistapart.com/responsive-web-design/fig/f-nav-narrow.jpg?resize=541%2C155)](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">### 关于作者

[![](https://i2.wp.com/d.alistapart.com/_made/pix/authors/uploads/photo_116070_120_120_c1.jpg?resize=120%2C120)](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)