什么是响应式网页设计ResponsiveWebDesign：不像是Web那种人

ResponsiveWebDesign

ETHANMARCOTTE原作于2010年5月25日

设计师了解的在印刷媒体的控制功能，常常也会希望Web媒体会有，但是它们只是限制在打印下来的页面上能够使用。我们需要接受这种的事实：web根本没有相同的限制和为这种的韧性准备的设计。但是首先我们需要接受这些落差和流程。

——JohnAllsopp,“ADaoofWebDesign”

英国建筑师ChristopherWren有一次开玩笑说他选择了一个"以永恒为目标"的领域，而这种的方法还有它吸引人的一面：不像是Web那种总让人觉得是下面星期为目标的东西，建筑是一个以他的长久性来定义的学科。一个建筑的地基决定了它的底座，底座决定了他的结构，结构决定了它的外形。建筑的每一个阶段都比上一个阶段更固定，更无法改变。创造性的决定非常准确地决定了物理空间的颜色，规划好了他们几十以至几百年间在这个范围中活动的方法。

虽然在Web上工作则是完全不同的事情。我们的工作内容由瞬时性定义，经常在一两年里就该调整以及更换。不一致的窗口长度，屏幕分辨率，用户偏好或者我们客户安装的字体仅仅是在交付工作时要考量的奇怪东西中的冰山一角。经年累月我们早已变得不可思议地精于此道。

然而形势在差异，而且或许比我们想要的还快。移动浏览量预计三到五年内会达到桌面访问。在三个带有支配地位的视频游戏系统中就有两个有Web浏览器（比如其中一个还特别棒。）。我们为了鼠标和屏幕设计，为T9键盘设计，为摇杆游戏控制器设计，也为触屏设计。简而言之，我们今天要面对比以前任何之后更大次数的设备、输入方法或者浏览器类型。

近年来，我看到更多公司起初要求"iPhone版网站"成为人们项目的一个别。这是一个很有趣的表述：从表面来看，当然，这是说移动版WebKit完全超过浏览器的质量，同时也有跳出桌面思考的一个强有力的商业案例。但是成为设计师，我认为我们一直从这种确立的要求中寻求安慰，因为它们允许我们把面前的弊端划分开来。我们可以把移动感受明确地隔离到单独的子域和空间中，跟"非iPhone版网站"分开。但是接下去呢？一个iPad网站？再来一个N90网站？我们真的能经常这么保证为每一种新的用户代理提供专门为之设计的感受？从某些含义上讲，这起初觉得像是一个零和游戏，但是我们——以及我们的设计——该怎么适配呢？

弹性的基础

让我们考量一个设计的事例。我创建了一个简单的幻想杂志页面。它是在流体格上的直接的两栏布局，其中四处散布着一些弹性的图片。作为非固定布局的大量支持者，我长期认为他们非常"面向未来"只是由于他们不对于特定布局。在某些程度上，规则是：弹性设计没有对浏览器窗口宽度做任何假设，并且特别好看地适配了带有人像和景物图方式的设备。

然而不论是固定设计而是流体设计，没有任何设计可以在超过它最初考虑的环境时缩放自如，示例中的设计在浏览器窗口大小改变时完美地缩放，但在更低分辨率下关键点随后出现了，当用比800x600更小的视口去观看时，logo后面的插图被截断了，导航文本则在不靠谱的地方换行，图片和按钮因为过度拥挤而丧失易读性。而不只是是分辨率过小时的导致的影响：当用宽屏去看这一设计时，图片立刻成为了笨拙的尺寸，挤开了旁边的内容。

总的来说，我们的韧性设计桌面环境工作良好，因为它本身就是为之设计的，但是不能否搞定差得很多的状况。

支持响应

最近，一个新兴的学科名为"响应式结构设计"（编者注：这是建筑学领域的概念）起初设问物理空间到底能用于让多少人借助他们。通过嵌入式机器人科技和伸缩性材料，建筑师试验并且艺术装饰和墙壁结构在收到挤压时才会弯曲、弹性和扩展。在装满人的之后，运动传感器与气候控制器配合以控制频率和周边光线。一些公司终于生产出了"智能玻璃科技",能够在屋子里的居住人人数超过一定阈值的之后自动变得不透明，以给与人们一层额外的隐私保护。

在人们的书"响应式构架设计"中，MichaelFox和MilesKemp描述这个更接近于"一个可以对话的多重循环系统；一个大幅而有成就性的数据交换中心。"指出下我的见解什么是响应式网页设计，在我看来这是一个微妙但是强有力的差别：比起之前所说的固定的、不变的空间来要求特定的感受，他们阐明了居住者和建筑物之间可以，也需要动态地相互影响。

这就是我们要前行的道路。与其为每一种数量不断提高的web设备裁切出一种颇具关联的设计，我们可以将它们视为同一种感受的不同面。我们可以为绝佳视觉感受来设计，但是在我们的设计中加入基于标准的科技是的他们不只是是弹性的，而且更好地适配到渲染他们的外媒上去。简单地说，我们必须实践响应式web设计。但是如何做呢？

初识mediaquery

在CSS2.1时代，我们的风格表可以借助媒体种类来判定设备。如果你有写过打印用的风格表，你必须特别熟悉这一概念：

由于想要让我们设计下来打印格式更好的页面，CSS标准提供给我们一系列的可接受外媒类型，每一种都为特定的已知可以访问web的设施定制。但是多数浏览器和设备从来没有拥抱这一标准的精神，留下了长期推动不完整的媒体类型，或者根本就给忽视掉。

谢天谢地,W3C搞上去了mediaquery作为CSS3标准的一个别，改进了外媒类型的承诺。mediaquery允许我们不只是以特定设备类别为目标，还可以真正地检查设备拿来渲染我们作品的详细物理特性。例如，随着移动WebKit的崛起，mediaquery成为受欢迎的用户端技术，可以为iPhone、Android手机和它们的亲戚提供裁切讲究的风格表。要想做到这个，我们可以把一个查询条件写入外链样式表的media属性：

 media="screen and (max-device-width: 480px)"
 href="shetland.css" />

这个查询条件包括两个别：

用通俗地其实，我们要求设备的水准分辨率(max-device-width)等于甚至大于480px。如果这个测试通过——也就是说，如果我们的作品在小屏幕设备如iPhone上面，设备就会读取sheland.css。否则，外链就会被完全忽略。

设计师们过去就当时实践过对于分辨率的加码，大个别都依赖像是CameronAdams的nb脚本一样的JS驱动的解决方案。但是mediaquery标准提供了一个媒体特征的宿主，它远不止屏幕分辨率那么简洁，它极大地扩展了我们可以用查询来测试的范围。还有就是，你可以在一次查询中同时测试多个属性的值，只要使用and关键字链接起来就可以了：

也有更多，我们不只是可以在link标签中启用mediaquery。我们也可以把他们直接包括在CSS中成为@media规则的一部分。

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

以及作为@import指令的一部分。

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

虽然在每一种状况下，作用是一样的：如果设备通过了我们设定的mediaquery检测，相关的CSS就会作用到我们的标签，简单来说mediaquery对于其他人来说就是条件注释。并非对于特定版本的特定浏览器，我们可以以外科切除手法去矫正我们布局在缩放到只是原始和完美尺寸时发生的问题。

适配、响应与消除

目前我们转回来看看页面底部的照片。在它们默认的布局中，有关的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被清零。这个可以很高地缓解问题，然而这可视区域如果明显地大于以及宽于我们当时的设计就不行了。用mediaquery，我们按照特定分辨率做定点修复，适配我们的设计以规避显示。

首先，在可视区域的分辨率增加到最低限600px的之后，让我们来把页面变成单栏。这样在风格表最上面，我们建立一个新的@media区块，像是这种：

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

如果你在一个现代桌面浏览器看我们更新后的页面，然后把窗口长度增加到600px以下，mediaquery将会关闭设计中主要元素的浮动，在文档流中顺次堆叠这些区块。这样我们的小型化设计就很高地做起来了，但是照片还没有很智能地缩小。如果我们引入另一个mediaquery，我们可以相应地改变他们的布局：

@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;
 }
}

不要在乎这个很丑的百分比；我们也是再次计算了流体格的长度来适应新的单栏布局。简单地说，当可视区域的长度增加到400px以下的之后，我们从三列的发力切换到二列的发力什么是响应式网页设计，让这个照片看起来更突显。

我们也可以给宽屏的显示切实地做一些事情。针对高一些的分辨率，我们可以把照片适配到六栏布局，把他们全都放到同一行：

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

目前我们的照片在分辨率谱系中的两段都可以完美呈现，可以按照窗口和设施分辨率自动改进他们的布局模式。

然而这也是个起初。通过我们嵌入在CSS中的mediaquery，我们能改变的不只是是几张新照片的摆放：我们可以采用新的，可以修改的布局以配色各种分辨率区段，可能并且导航在大屏幕视图下非常突显，或者在小屏幕中再次定位到Logo上方。

而响应式设计并不只是是布局改变。mediaquery允许我们实践中颠覆自己的形态做到令人无法置信地高准确性适配页面：我们可以在小屏幕上提高目标区域以及链接，在触屏设备上更好地遵守费茨法则（译注：Fitts'slaw）；有选用地呈现以及隐藏用于提高页面导航元素。我们反而可以建立响应式排版来修改文本的宽度和框线，为提供显示的设施改进阅读感受。

一些技术摘记

值得一提的是，mediaquery的健壮性在现代浏览器中倍感难以置信。桌面浏览器如Safari3+,Chrome,Firefox3.5+,和Opera7+都原生地支持mediaquery,更近一些的移动浏览器如OperaMobile和移动WebKit也是这么.当然了，这些桌面浏览器的旧版本不支持mediaquery。而即使微软承诺在IE9中支持mediaquery，但是InternetExplorer现在没有原生实现（译注：此文写的之后IE9还没回来，IE9和IE10确实尚未完整支持了mediaquery）。

虽然这么，假如你针对在遗老遗少级别的浏览器上实现mediaquery，这里有JavaScript带来的一线曙光：

然而即使使用JavaScript无法造成你的兴趣，这也有完全可以理解的。然而，这可以提高在弹性格的基础上做布局的实例，确保你的设计在没有mediaquery的浏览器和设施上也运用了一些弹性设施。

前路展望

流体网格，弹性图片或者mediaquery是响应式web设计的三个科技要素，同时他规定一种新的认知模式。除了把我们的内容分成完全不同的、设备相关的感受之外，我们可以使用mediaquery来对我们的工作在不同的视觉上下文中做渐进提升。这不是说没有合适将网站分成特定设施的商业案例；例如，如果客户到你的移动站点来的想要找的东西比桌面内容更少，那么提供不同的内容就是最适合的做法。

然而这种的设计观念不需要是我们的默认选项。现在比起先前任何之后，我们的设计工作都更偏向于不同梯度的感受中展示。响应式web设计给我们提供了一个前进的道路，最终让我们无法做到"为事物的涨落而设计"。