网页响应式设计

最近工作中接触到很多关于前端的一些知识，所以也想趁此机会整理一些这方面的文章，对这方面感兴趣的童鞋可以持续关注一下喔～先从响应式设计开始说吧。

随着移动互联网的发展，终端的丰富，导致网页在各种终端不同分辨率下能完美的呈现是一件极具挑战性的工作，而响应式设计可以说就是为移动互联网而生的。

我们之前可以看到一些知名网站都有3g.qq.com,m.taobao.com等等专门为智能手机终端推出的网站，那问题就来了，现在终端产品这么丰富，从3.0～10.0寸的屏，需要为每一种设备做一个独立网站以达到在不同设备中相同的视觉风格和操作体验吗？这势必会增加工作量而且是重复劳动。开发人员在设计页面时，一般都强调模块化，能够易扩展，以保证在任何地方都能正常显示，而响应式设计很好的满足了大家的要求。

ETHAN MARCOTTE在第一次正式提出响应式设计概念时就定义了响应式设计的三大要素：流体栅格、弹性图片和媒介查询。

响应式设计

传统网页是被固定的装在固定尺寸的盒子（栅格）里，无法随着外界环境而改变，而响应式页面就像一袋水，可以成为不同形状，流体栅格就是按照百分比来设定容器的宽度，宽度会随着浏览器变化而变化，当然，光容器流体也不行，内容也需成比例变化，所以页面上的内容：文字，图片等都可以设为弹性的。

“流体栅格+弹性内容”让网页具备了响应能力，媒介查询起的作用是定义响应规则。就像使用不同的容器来装水，呈现的形状也将不同。 媒介查询探测浏览器宽度，并在指定宽度范围内加载不同的样式。如下图所示：

弹性图片

响应式Web设计的思路中，一个重要的因素是怎样处理图片方面的问题。有很多同比缩放图片的技术，其中有不少是简单易行的。其中，由Richard Rutter最先尝试的一种做法比较流行，即使用CSS的max-width属性。

img {max-width:100%;}

只要没有其他涉及到图片宽度的样式代码覆盖掉这一行规则，页面上所有的图片就会以其原始宽度进行加载，除非其容器可视部分的宽度小于图片的原始宽度。上面的代码确保图片最大的宽度不会超过浏览器窗口或是其容器可视部分的宽度，所以当窗口或容器的可视部分开始变窄时，图片的最大宽度值也会相应的减小，图片本身永远不会容器边缘隐藏和覆盖。

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

响应式Web设计的优势

开发、维护、运营成本优势：页面只有一个，只是针对不同的分辨率、不同的设备环境进行了一些不同的设计，所以在开发、维护和运营上，相对多个版本，能节约成本。

兼容性优势：移动设备新的尺寸层出不穷，定制的版本通常只适用于某些规格的设备，如果新的设备分辨率变化较大，则往往不能兼容，而开发新的版本需要时间，这段时间内的访问就是个问题，但是响应式Web设计可以提前预防这个问题。

操作灵活：响应式设计是针对页面的，可以只对必要的页面进行改动，其他页面不受影响。

实例

前不久优酷改版，而此次改版则使用了响应式设计方法，我们可以看以下几个页面：

全屏下的显示

宽度缩小时的显示

手机端的显示