响应式⽹页设计与应⽤

原⽂出处：

每个射击湿都想⾃⼰的⽹站可以在任何设备上体验都很⽜，神马iPhone 、ipad 、⿊莓、kindle……⽆所不能啊~ 苦逼的是这些东东的系统不⼀样，也不⼀样啊；电脑的屏幕越来越⼤，但是还有⼀半的⽤户还是⽤的17⼨CRT ；⼿机、pad 层出不穷，没有个统⼀标 准，我们又不想失去任何⼀个⽤户，这可苦了我这些设计师了，需要付出更多的⼼⾎来获得更好的体验，谁让我们是射击湿呢。

电⼦产品更新换代节奏都快成马了，跟都跟不上。对于⽹站来说根本不可能为每种设备都开发个版本出来，结果就是赢得鱼，却失去了熊掌，不过我们还是有办法的。响应式(Responsive Web design)，理念是设计和开发应根据屏幕的⼤⼩、平台的⽤户的⾏为和环境基础上⾃动调整；他应该有⼀个灵活的⽹格和布局，图像和CSS 能够智能的组合 使⽤。⽐如说⽤户从电脑切换到ipad ，⽹站能够⾃动切换以适应，图像⼤⼩和脚本。换句话说，⽹站应该具备根据⽤户的使⽤环境来⾃动调整，这可以减 少不必要的重复设计。

响应式**Web**设计的概念曾经在A List Apart发表过⼀篇⽂章“”，⽂中援引了响应式建筑设计的概念：

所谓响应式建筑设计就是设计师尝试建造⼀种使⽤⼀些传感器检测周围环境，⽐如说

温度、湿度、光线等等⾃动进⾏调整的房⼦。现在我们把这个思路延伸到 WEB设计领域。我们可以想，为啥我们要为每个⽤户群各⾃打造⼀套设计⽅案呢？我们太笨了，有没有更智能的做法？和响应式建筑设计⼀样，web 设计也应该 做到智能调整。显然web 设计不能使⽤传感器，这就要更多的抽象思维。好在现在⼀些概念已经得到实践了，⽐如液态布局、 帮助页⾯重新格式化的media queries和脚本等。但是响应式不仅仅是关于屏幕⾃适应以及⾃动缩放的图⽚等等，它更像是⼀种对于设计的全新思维模式。

调整分辨率

不同的设备都有各⾃的屏幕分辨率、清晰度以及屏幕定向⽅式，不断被研发的各种新设备也将出现新的屏幕尺⼨规格。有些设备 基于横屏 (portrait)，有些是竖屏(landscape)，甚⾄还有正⽅形；对于⽇益流⾏的iPhone 、iPad 及其他⼀些智能⼿机、平板电脑，⽤户还 可以通过转动设备来任意切换屏幕的定向⽅式。怎样才能做到让⼀种

设计⽅案满⾜所有情况？

要想做到同时兼容横、竖屏(⽤户还有可能在页⾯加载的过程中切换⽅向) ，我们就必须考虑N 种屏幕尺⼨规格。我们可以将 这些规格划分为⼏个⼤类，然后为每⼀类做⼀种⽅案，确保该⽅案⾄少在本组中尽量具有弹性。但即使这样，结果也将是⾮常不爽的，谁知道某类设备在5年之后的 占有率是多少？⽽且；天哪，哥受不了了……

Morten Hjerde和他的哥们对2005⾄2008年市场中的400余种移动设备进⾏了统计() ，下图为⼤致统计结果：

在08年之后，更多更有代表性的新设备问世并普及了。显然，我们不可以沿着“多⽅案”的思路继续⾛下去；那么我们应该怎样做呢？

部分解决⽅案：⼀切弹性化

⼏年前，弹性布局(flexible layout)⼏乎是⼀种奢侈品，所谓弹性，也只是体现在竖排布局以及字号等⽅⾯；图⽚尺⼨⽆法变化，这就导致图⽚破坏了页⾯结构，⽽且即使是有弹性的元 素，在很多情况下他会乱弹，仍然是⼀塌糊涂。所以，所谓的弹性布局其实并⾮那样弹性，它有时甚⾄不能适应台式机与笔记本的屏幕分辨率差异，更不⽤说⼿机等 移动设备了。

现在，我们可以通过响应式的设计和开发思路让页⾯更加”弹性”了。图⽚的尺⼨可以⾃动调整，页⾯布局再不会被破坏。虽然永远没有最完美的⽅案，但它给了我们更多选择。⽆论⽤户切换设备的屏幕定向⽅式，还是从台式机屏幕转到iPad 上浏览，页⾯都会真正的富有弹性。

在前⽂提到的Ethan Marcotte的⽂章中，他通过展⽰了响应式在页⾯弹性⽅⾯的特性：

该实例的实现⽅式完美的结合了和技术，并且聪明的在正确的地⽅使⽤了正确的HTML 标记。”液态⽹格”是⼀种很常见的实现⽅式；对于“液态图⽚”技术，下⾯的⽂章做了不错的介绍：说到创建液态页⾯，最好看看Zoe Mickley Gillenwater的那本《Flexible Web Design:Creating Liquid and Elastic Layouts with CSS》 “”。另外，Zoe 的这篇”“提供了不少关于创建弹性⽹格和布局的教程、资源、创意指导和实现⽅式。

从技术⾓度讲，虽然听上去这些都很简单，但它着实相当复杂。举个例⼦，仔细观察Ethan Marcotte提供的实例中的logo 图⽚：

如果我们将浏览器窗⼜不断调⼩，会发现logo 图⽚的⽂字部分始终会保持同⽐缩⼩，保证其完整可读，⽽不会和周围的插图⼀样被两边裁掉。所以整个logo 其实包括两部分：插图作为页⾯标题的背景图⽚，会保持尺⼨，但会随着布局调整⽽被裁切；⽂字部分则是⼀张单独的图⽚。

这个实例⼩⼩的展⽰⼀下响应式Web 设计的思路。不过这点⼩努⼒还不⾜以避免整个布局在⼩尺⼨窗⼜中变的过窄或过短，并且logo ⽂字最终会变的⼩到难以识别，背景图⽚也会被过多的裁切。

弹性图⽚

响应式Web 设计的思路中，⼀个重要的因素是怎样处理图⽚⽅⾯的问题。有很多同⽐缩放图⽚的技术，其中有不少是简单易⾏ 的。其中，由Richard Rutter最先尝试的⼀种做法⽐较流⾏，即使⽤CSS 的max-width 属性。这个⽅法在Ethan Marcotte的⼀⽂中也有提到。

img { max-width: 100%; }

只要没有其他涉及到图⽚宽度的样式代码覆盖掉这⼀⾏规则，页⾯上所有的图⽚就会以其原始宽度进⾏加载，除⾮其他设备可视 部分的宽度⼩于图⽚的原始宽度。上⾯的代码确保图⽚最⼤的宽度不会超过浏览器窗⼜或是其容器可视部分的宽度，所以当窗⼜或容器的可视部分开始变窄时，图⽚ 的最⼤宽度值也会相应的减⼩，图⽚本⾝永远不会容器边缘隐藏和覆盖。实际上，就像Jason Grigsby在他的⼀⽂中提到的，”液态图⽚背后的思路，就是⽆论何时，都确保在其原始宽度范围内，以最⼤的宽度同⽐完整的显⽰图⽚。我们不必在样式表中为图⽚设置宽度和⾼度，只需要让样式表在窗⼜尺⼨发⽣变化时辅助浏览器对图⽚进⾏缩放。” ⼀种简⽽美的⽅法。

图⽚本⾝的分辨率及加载时间是另外⼀个需要考虑的问题。虽然通过上⾯的⽅法，可以很轻松的缩放图⽚，确保在移动设备的窗⼜中可以被完整浏览，但如果原始图⽚本⾝过⼤，便会显著降低图⽚⽂件的下载速度，对存储空间也会造成没有必要的消耗。响应式图⽚

由Filament Group提出的”响应式图⽚”技术思想，有助于解决上⾯提到的问题：不仅要同⽐的缩放图⽚，还要在⼩设备上降低图⽚⾃⾝的分辨率。可以看下

先。我们可以使⽤苹果专有的⼀些meta 标记来解决类似的问题。在页⾯的部分添加以下代码(详情可以参考) ：

当页⾯所需要适应的不同设备的屏幕尺⼨差异过⼤时，除了图⽚⽅⾯，我们也应该考虑到整个布局结构的智能化调整；我们可以 使⽤独⽴的样式表，或者更有效的，使⽤CSS media query。这不会引起多⼤的⿇烦，多数样式设定不会被影响和改变，只有⼀些特定的元素会通过浮动、宽度和⾼度等的设置来改变位置。

我们可以使⽤⼀个默认主样式表来定义页⾯的主要结构元素，⽐如#wrapper、#content、#sidebar、#nav等的默认布局⽅式，以及⼀些全局性的配⾊和字体⽅案。我们可以监测页⾯布局随着不同的浏览环境⽽产⽣的变化，如果它们变的过窄过短或是过宽过长，则通过⼀个⼦级样式表来继承主样式表的设定，并专门针对某些布局结构进⾏样式覆写。我们来看下代码⽰例：

下⾯的代码可以放在默认主样式表style.css 中：

/* Default styles that will carry to the child style sheet */html,body{

background...

font...

color...

}

h1,h2,h3{}

p, blockquote, pre, code, ol, ul{}

/* Structural elements */

#wrapper{

width: 80%;

margin: 0 auto;

background: #fff;

padding: 20px;

}

#content{

width: 54%;

float: left;

margin-right: 3%;

}

#sidebar-left{

width: 20%;

float: left;

margin-right: 3%;

}

#sidebar-right{

width: 20%;

float: left;

}

下⾯代码可以放在⼦级样式表mobile.css 中，专⻔针对移动设备进⾏样式覆写：#wrapper{

width: 90%;

}

#content{

width: 100%;

}

#sidebar-left{

width: 100%;

clear: both;

/* Additional styling for our new layout */

border-top: 1px solid #ccc;

margin-top: 20px;

}

#sidebar-right{

width: 100%;

clear: both;

/* Additional styling for our new layout */

border-top: 1px solid #ccc;

margin-top: 20px;

}*/

⼤致的视觉效果如下图所⽰：

Media Queries

CSS3⽀持CSS2.1所⽀持的所有媒体类型，例如screen 、print 、handheld 等，同时添加了很多涉 及媒体类型的功能属性，包括 max-width(最⼤宽度) 、device-width(设备宽度) 、orientation(屏幕定向，横屏或竖屏) 和color 。在CSS3发布 之后出现的新玩具，如iPad 或Android 相关设备，都可以完美的⽀持这些属性。所以我们可以通过media query为新设备设置独特的样式，⽽忽略那些不⽀持CSS3的台式机中的旧浏览器。在Ethan 的⽂章中，我们能看到⼀段media query使⽤实例：

代码本⾝可以很好的说明⼯作机制：如果页⾯通过屏幕呈现(⾮打印⼀类) ，并且屏幕宽度不超过480px ，则加载shetland.css 样式表。要了解更多关于CSS3媒体新属性的信息，可以参考”“⼀⽂。

我们可以创建多个样式表，以适应不同设备类型的宽度范围。中的”Meetthe media query”部分有更多的范例及解释。更有效率的做法是，将多个media queries整合在⼀个样式表⽂件中：

/* Smartphones (portrait and landscape) ----------- */@media only screen

and (min-device-width : 320px)

and (max-device-width : 480px) {

/* Styles */

}

/* Smartphones (landscape) ----------- */

@media only screen

and (min-width : 321px) {

/* Styles */

}

/* Smartphones (portrait) ----------- */

@media only screen

and (max-width : 320px) {

/* Styles */

}

上⾯的代码来⾃于Andy Clark创建的可以兼容各种主流设备的免费模板。这样整合多个media queries于⼀个样式表⽂件的⽅式，与通过media queries调⽤不同样式表的⽅式之间的区别与联系，可以参考”“⼀⽂。

CSS3 Media Queries

上⾯演⽰的⼀些代码范例是CSS2.1与CSS3通吃的。现在让我们来看看怎样使⽤CSS3专有的media queries功能来创建响应式Web 设计。其中某些⽅法在当前就有切实的使⽤价值，不久的将来则⼀定会全部派上⽤场。

min-width 和max-width 这两个属性很靠谱。通过min-width 的设置，我们可以在浏览器窗⼜或设备屏幕宽度⾼于这个值的情况下，为页⾯指定⼀个特定的样式表；max-width 则反之。

下⾯的⼏个⽰例中，我们使⽤的是将多个media queries整合在单⼀样式表中进⾏编码的句法。如前⽂所述，这样做更加⾼效，减少请求数量。

@media screen and (min-width: 600px) {

.hereIsMyClass {

width: 30%;

float: right;

}

}

上⾯代码中定义的类(hereIsMyClass)只有在浏览器或屏幕宽度超过600px 时才会有效。@media screen and (max-width: 600px) {

.aClassforSmallScreens {

clear: both;

font-size: 1.3em;

}

}

⽽这段代码的作⽤则相反：aClassforSmallScreens 类只有在浏览器或屏幕宽度⼩于600px 时才会有效。

可以看出min-width 和max-width 可以同时判断设备屏幕尺⼨与浏览器实际宽度。有些时候，我们希望通过 media queries作⽤于某种特定的设备，⽽忽略其上运⾏的浏览器是否由于没有最⼤化⽽在尺⼨上与设备屏幕尺⼨产⽣不⼀致的情况。这时，我们需要使⽤min-device-width 与max-device-width ，⽤来判断设备本⾝的屏幕尺⼨。@media screen and (max-device-width: 480px) {

.classForiPhoneDisplay {

font-size: 1.2em;

}

}

@media screen and (min-device-width: 768px) {

.minimumiPadWidth {

clear: both;

margin-bottom: 2px solid #ccc;

}

}

还有⼀些其他⽅法，可以帮我们有效的使⽤media queries锁定某些指定的设备。可以参考下⾯两篇出⾃Thomas Maier的⽂章：对于iPad 来说，orientation 属性尤其有⽤。它的值可以是landscape(横屏) 或portrait(竖屏) 。

@media screen and (orientation: landscape) {

.iPadLandscape {

width: 30%;

float: right;

}

}

@media screen and (orientation: portrait) {

.iPadPortrait {

clear: both;

}

}

不幸的是，这个属性⽬前确实只在iPad 上有效。对于其他可以转屏的设备，譬如iPhone ，可以使⽤min-device-width 和max-device-width 来变通实现；详情可以参考”“⼀⽂。

我们还可以将上述属性组合使⽤，来锁定某个屏幕尺⼨范围：

@media screen and (min-width: 800px) and (max-width: 1200px) { .classForaMediumScreen {

background: #cc0000;

width: 30%;

float: right;

}

}

上⾯的代码可以作⽤于浏览器窗⼜或屏幕宽度在800px ⾄1200px 之间的所有设备。其实，很多设计师和开发者仍会选择使⽤多个样式表的⽅式来实现media queries。如果从资源的组织和维护的⾓度出发，其益处确实⾼于效率的损耗的话，那么这样做也完全不坏：

所以呐，凡事没有绝对，最好根据实际情况决定使⽤media queries的⽅式。⽐如，对于iPad ，我们可以将多个media queries直接写在⼀个样式表中。因为iPad ⽤户随时有可能切换屏幕定向，这种情况下，要保证页⾯在极短的时间内响应屏幕尺⼨的调整，我们必须选择 效率最⾼的⽅式。

JavaScript

JavaScript 也是我们的武器之⼀，特别是当某些旧设备⽆法完美⽀持CSS3的media query 时，它可以作为后备⽀援。幸运的是，已经有专门的JS 库来帮助旧浏览器(IE5+，Firefox 1+，Safari 2等) ⽀持CSS3的media queries。使⽤⽅法很简单，下载并在你的页⾯中调⽤它。

⽽下⾯的代码则演⽰了怎样使⽤简单的⼏⾏jQuery 代码来检测浏览器宽度，并为不同的情况调⽤不同的样式表：

类似这样的解决⽅案还有很多。所以我们要清楚，media queries不是⼀个绝对唯⼀的答案，它只是⼀个以纯CSS ⽅式实现响应式Web 设计思路的⼿段。借助JavaScript ，我们则可以实现更多的变化。这篇”“向我们展⽰了JavaScript 配合media queries的更多细节信息。

显⽰或隐藏内容

通过前⽂的学习，我们已经了解到，对于响应式Web 设计，同⽐例缩减元素尺⼨以及调整页⾯结构布局，是两个重要的⽅式⽅ 法。但是对于页⾯中的⽂字内 容信息来说，则不能简单的只从”同⽐缩⼩”和”调整布局结构”这两⽅⾯去处理。对于⼿机等移动设备来说，在⽂字内容⽅⾯，已经有了很多最佳实践⽅式和指导 原则：简化的导航、更易聚焦的内容、以信息列表代替传统的多⾏⽂案内容等。

响应式Web 设计的思想，⼀⽅⾯要保证页⾯元素及布局具有⾜够的弹性，来兼容各类设备平台和屏幕尺⼨；另⼀⽅⾯，则是增强可读性和易⽤性，帮助⽤户在任何设备环境中都能更容易的获取最重要的内容信息。

有⼀条样式代码，我们已经使⽤了多年：

display: none;

我们可以在⼀个针对某类⼩屏幕设备的样式表中使⽤它来隐藏掉页⾯中的某些块级元素，也可以使⽤前⽂的⽅法，通过JS 判断 当前硬件屏幕规格，在⼩屏幕设备的情况下直接为需要隐藏的元素添加⼯具类class 。⽐如，对于⼿机类设备，我们可以隐藏掉⼤块的⽂字内容区，⽽只显⽰⼀ 个简单的导航结构，其中的导 航元素可以指向详细内容页⾯。

注意，不要使⽤visibility: hidden的⽅式，因为这只能使元素在视觉上不做呈现；display 属性则可帮助我们设置整块内容是否需要被输出。对于移动设备来说，避免这些不必要的资源浪费还是很重要的。我们来看⼀个简单的⽰例：

图中上半部分是⼤屏幕设备所显⽰的完整页⾯，下⾯的则是该页⾯在⼩屏幕设备的呈现⽅式。页⾯HTML 代码如下：

Left Sidebar Content | Right Sidebar

Main Content

A Left Sidebar

A Right Sidebar

下⾯是默认的主样式表，其中，我们要隐藏掉链接导航部分(sidebar-nav)，因为默认样式适⽤的设备屏幕会⾜够⼤，⾜够显⽰包括两个侧边栏在内的所有内容。

#content{

width: 54%;

float: left;

margin-right: 3%;

}

#sidebar-left{

width: 20%;

float: left;

margin-right: 3%;

}

#sidebar-right{

width: 20%;

float: left;

}

.sidebar-nav{display: none;}

下⾯是⽤于⼩屏幕移动设备的样式表代码。现在，我们要隐藏掉两个侧边栏，并使sidebar-nav 显⽰出来。借助 JavaScript，当⽤户点击sidebar-nav 中的链接时，对应的侧边栏可以恢复显⽰。当然，触发恢复显⽰的⽅式有很多种，即可以通过JS 改变 侧边栏的display 属性值， 也可以为其添加额外的布局样式。

#content{

width: 100%;

}

#sidebar-left{

display: none;

}

#sidebar-right{

display: none;

}

.sidebar-nav{display: inline;}

现在，我们的页⾯已经可以随着设备和屏幕规格的变更，响应式的做到元素的同⽐缩放、布局结构的改变、内容的优化调整。特 别是对于⼿机设备，我们还要 在实践过程中注意⼀些该类设备共有的设计指导原则。⽐如，针对⼿机设备，使⽤⼀个特定的样式，将页⾯原有的⽂字导航元素变为更易操作的图标形式。下⾯的⼀ 些⽂章资源可作参考阅读：

触屏与⿏标

触屏设备已经成为主流。虽然⽬前多数触屏设备还是⼩屏幕类型的产品，⽐如⼿机，但是市场上越来越多的⼤屏幕设备也开始使⽤触屏技术；且不说iPad ⼀类的平板电脑，就连⼀些笔记本和台式机也加⼊了这⼀⾏列。⽐如，即使⽤

传统的键⿏设备，同时也加⼊了触屏技术。

相⽐于传统的基于⿏标指针的互动，触屏技术显然带来了截然不同的交互⽅式与相应的设计规范；两者又有各⾃所适⽤的领域。 所幸，要使我们的设计⽅案同时满⾜这两类设备的规范，并⾮⼀件难事，只是有些地⽅需要注意。⽐如，触屏设备⽆法反映CSS 定义的hover ⾏为及相应的样 式，因为它没有⿏标指针的概 念，⼿指点击就是click ⾏为。所以不要让任何功能依赖于对hover 状态的触发。

有兴趣的话，可以读读这篇”“， 这⾥提到的很多建议即有利于改进针对触屏设备的设计⽅式，同时也不会削弱传统键⿏设备上的⽤户体验。⽐如，放在页⾯右侧的导航列表可以对触屏设备的⽤户更 加友好。因为多数⼈习惯⽤右⼿点击操作，⽽左⼿负责握住设备；这样，放在右侧的导航列表即⽅便右⼿的点击，又可以避免被握着设备的左⼿不⼩⼼触碰到。⽽这 ⼀点与键⿏设备⽤户的习惯完全不⽭盾。

结论

这篇⽂章真是又臭又长，终于快完了。我们确实进⼊了web 开发的新时代，随着科技进步我们还会继续优化我们的体验。今天我们设计的⽹站应该能够适应未来和现在，了解响应式web 设计不需要太多的学习，他绝对⽐为每款设备提供设计⽅便的多。

响应式web 设计并不是最好的，这只是个单纯的概念，它可以有效的提⾼⽤户体验但是却不能彻底解决。我们要⾯对不断出现的新设备出现，找出⼀个更好的解决⽅案，不断的改善⽤户体验。

响应式web 设计可以提供⼀个⽐较满意的效果，他给⼴泛的应⽤设备提供了⼀个⾃定义的解决⽅案，⽆论是⼀个⽼式旧笔记本还是最先进的设备都能够获得⽐较好的体验，这才是作为⽹页设计师最想看到的，设计师眼中只有⽤户，⽤户感觉好⾃⼰就⾼兴，⾃⼰苦点累点又算什么呢？

英⽂原版：财付通设计中⼼翻译：译者：W3Cschool （www.w3cschool.cn ）最⼤的技术知识分享与学习平台此篇内容来⾃于w3cschool.cn ⽹站⽤户上传并发布。