本文由Spy根据Annarita Tranfici的系列教程《Understanding Responsive Web Design》之一《Understanding Responsive Web Design: Clear Concepts and Practical Applications》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://www.sitepoint.com/responsive-web-design-tips-and-notes/。

——作者：Annarita Tranfici

——译者：Spy

一些读者或许好奇的是，人们为什么对“响应式web设计”（RWD）的关注度快速提高，开发人员都把此技术作为自己必备的技能之一，深入去学习理解这项新技术。这名称也常常作为前沿移动终端技术被提起。

我们不会空谈概念，会把定义说清楚，并使用代码例子演示这项技术。如果你花一些时间来测试和了解真实的现代网络和移动技术，你就会体会到响应式web设计的好处在哪了，实现一个响应式设计可能比你想象的还要简单。

现在我们都感受到Internet的变化是如此之快，促使这变化正是不断涌现的各种移动终端设备。有最近的研究表明，在未来3到5年内，通过接入网络的移动设备将超越桌面电脑设备。要适应这么快速转化也给开发人员面临巨大压力与挑战，对能力有了新的要求。

因此，开发人员现在不仅仅是根据桌面电脑设备来设计项目，还要考虑到智能手机、游戏机和平板。这些设备现以指数式增长，同时也使得多种浏览器规范和屏幕尺寸不断地增长。很明显，创建一个新的版本来适应任意屏幕尺寸的设备是非常不现实的。

因此，响应式web设计是提供给移动终端开发者的一种有效地应对日益增长各种的屏幕尺寸。这是一种新的方法，需要考虑到几个重要因素，例如用户行为，屏幕尺寸和操作平台。这种设计会自动地优化地响应用户的偏好，而不管任何屏幕或者软件。

考虑到这些方面，你可能认为这些实践已经通过流布局（fluid layouts），媒体查询（media queries）和各种脚本适应页面布局而应用非常广泛了。一个共同的响应式web设计的过度简单化就是单纯地定义只需要考虑屏幕大小以及自动地使内容适应即可。然而，响应式web设计包含的多于这些；而是需要考虑到设计的更多方方面面。RWD(响应式web设计简写)就是，一种全新的想法。它的实现比你想象地还要简单。

响应网页设计是究竟什么？

网上有关于响应式web设计的定义非常多，但大多数都是非常抽象，哲理或者是不可信的。如果你想学习与理解真正响应式web设计的定义，它可以归为如下的三种技术：

1. 流体图像；
2. 流体网格；
3. 媒体查询。

让我们进一步学习响应式web设计的每一个关键组件。

流体图像与流体网格

什么是最好的方法来设计一个网站应用在成千上百不同的屏幕尺寸,哪些可能甚至不存在了？最好的方法不是适应某些特定的设备，而是使得布局扩展性强，灵活性高，并且可以适应屏幕所有尺寸，包括一些现在还不流行的屏幕尺寸。

前些年，灵活的布局还不是这么流行，唯一的灵活布局元素就是网格列和文本。图像却没有以灵活性的思想去设计，因此在很多情况下，图形容易坏掉了或者显示不正常。幸运的是，现在，图像已被包含在响应式web设计思路里面，可以自动地适应屏幕尺寸，这做法促进了对更大概念设计和项目原本想法的保护。图像总是那么引人注目，感谢的是，你的响应布局可以而且应该保持这种响应界面强大的方面。无图像的移动网站是最初移动设计遗留的方法。

从技术的角度来说，当你在创建一个响应式设计时，为图像创建灵活性是一大要解决的问题。现已有多种技术来按照比例缩放图片；有些是很容易实现的，最著名的是，Ethan Marcotte写关于流体图像的文章里面有两个简单的CSS规则：max-width和height:auto,就如：

img{
   max-width: 100%;
   height: auto;
}

第一条规则确保图像保持在父容器，而并不会溢出；忽略元素的高度与宽度；你让浏览器根据设备来设置图像的大小。把图像的宽度设置为最大值就是浏览器的宽度或者设备的宽度，所有当宽度减少时，图像会按照比例缩小（这是值得推荐的，但IE不兼容）。如果图片的尺寸有限制和要适应老版本的浏览器，那这并不是最优的方案，但可以使用JavaScript来解决这个问题，如何实现？有兴趣的同学可以进入上面的链接学习。

总体来说，使用这规则是可以完美的运行的，然而，如果你在维护旧版页面，那些宽度高度等属性都被直接写在html里面，那响应的图像可能会被妥协了。现在为了防止这些，你并不需要去改变HTML的代码，只需要添加CSS规则height:auto，这样你的图像就可以被争取的渲染和缩放了。

Filament组提出了另外一种技术不仅是正确地设置图像的尺寸，在较小的设备中为了节约空间，还降低图像的分辨率，加载时间和移动宽带（流量）。

这种技术需要一些文件，这些文件都在Github:一个JavaScript文件（rwd-images.js），Htaccess文件，和一张图片（rew.gif），然后，在HTML代码中，我们引用两种图片:一个小的“R”前缀，必须适应(“响应”)和大的data-fullsrc(HTML5启用的一个属性,更多详情可以访问这个页面)。

实现这种技术，看起来如下：

img <img src="smallRes.jpg" data-fullsrc="largeRes.jpg">

当屏幕尺寸大于480px，页面就去加载大图片（largeRes.jpg）。JavaScript插入元素是可以允许页面分离适应的图片。当页面加载完成，除了大或者小图片会根据预先的设置来加载之外，所有文件都会正常的加载下来。如果这技术不起作用，所有的（大的和小的）图片都被加载下来，这样就会浪费宽带，反过来说，这技术防止了不必要的图片加载下来，另外它是兼容现代浏览器（包括IE8）和移动设备的。

在响应式设计中，图片的自适应是一个烦人的事情，网上的说法也是众说风云，如果您对这方面的解决方案感兴趣，可以点击早前写的教程《Flexible Images》——@大漠

媒体查询

对于那些web开发者必须创建响应式网站来说，媒体查询可能是最好的工具了。这技术使得能够创建流体设计来适应用户设备。值得建议的是,这组指导原则(或规则)应该保存在一个单独的CSS样式表中，但这不是必需的,所以你可以根据自己需求去做。就我个人而言,我更喜欢我自己的分离组织,所以我创建一个新的CSS表(不要忘记在HTML代码链接这样式表)。

<link href="media-queries.css" rel="stylesheet" type="text/css" />

你可以写尽可能多的媒体查询。其主要目的是应用不同的CSS规则为了获得不同的布局,根据显示窗口的宽度赋予你的内容。媒体查询中的值被表示为百分数,而不是像素。这个特性,使得各种页面元素流体和灵活。与不同的屏幕尺寸比例扩张和收缩;固定像素值会反应迟钝,会导致不可伸缩。

如下代码示例:

@media screen and (max-width: 980px){
   #pagewrap{
      width: 95%;
   }

   #content{
      width: 60%;
      padding: 3% 4%;
   }

   #sidebar{
      width: 30%;
   }
}

通过设置一系列的CSS规则,设备的屏幕最大宽度为980像素,容器content将占据60%的宽度(padding填占3%,4%,3%,4%),而侧栏sildebar将占总宽度的30%。

媒体查询有助于考虑多个显示尺寸的可能性,因此,组织样式规则可以快速而方便地修改。使用相同的过程,我们可以设置不同的规则应用于屏幕宽度小于650像素,小于480像素等。

有关于媒体查询更详细的介绍，可以点击《媒体查询系列教程》。——@大漠

结论

我们应该改变过去“响应网页设计”的认知,清晰地理解概念和真正的技术应用。我们已经定义了它的基本特性以及用代码例子来演示这些响应实现方法。在接下来的文章,我们将讨论流体和网格布局以及在我们的网站如何管理字体和图片。

译者手语：整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！

关于Spy

原名吴建杰，常用昵称“间谍”，现居广州。目前不断学习CSS3,HTML5等前沿技术，巩固js基础知识。在进行前端开发的过程中，追求HTML便签语义化，CSS的重用性，js封装等很多性能优化的操作，一切以用户体验为基础，不断地追求性能优化。希望与更多的同行朋友一起共勉：个人博客,新浪微博。

上一篇下一篇

如需转载，烦请注明出处：

英文原文：http://www.sitepoint.com/responsive-web-design-tips-and-notes/

中文译文：http://www.w3cplus.com/responsive/responsive-web-design-tips-and-notes.html