响应式Web设计的背景　

不是专业前端，可2011年底至今大部分时间在做着一个前端开发工程师的事情，所以多少也有点总结，多少也有点“经验”和分享。

响应式Web设计不是我首创的概念，早就有了，我这里只不过把自己最近这段时间关于这方面的研究做了一个总结。

至于这篇文章能给你带来多大的益处我保证不了，但是只从读完这篇文章之后你至少能明白以下几点：

1、为什么要做响应式Web设计？

2、什么是响应式Web设计？

3、如何做响应式Web设计？

4、送你几个关于响应式Web设计优化的小建议！

在说响应式Web设计前，我们先来看看移动互联网的发展现状：

1、移动互联网用户规模接近PC互联网用户规模，市场规模占比进一步增加，移动互联网成为主流；

2、网络设备多元化，智能手机将成为网络体验获取的重要终端。

从移动互联网的用户规模、市场规模、终端设备三个方面做了一个简单的说明，不难看出，未来互联网发展的几个方向：

1、PC不再是互联网的主要入口，而且很有可能沦为一个次要入口；

2、移动已经成为第一屏幕；

3、移动技术将引领潮流。

移动互联网正走向一个百花齐放的时代：

中国互联网正在往移动方向发展，移动设备正在超过PC设备，成为互联网的常见设备，在这样一个客观背景下，我们不得不问自己：如何才能在不同的设备上呈现给用户同样的Web网页呢？

很显然，答案就是——响应式Web设计，那究竟什么是响应式设计呢？

响应式Web设计的概念

从背景介绍一文中，我们可以得到这样一个结论：互联网正在快速迅猛地向移动终端发展，这样对于网页就有了一个Anywhere的需求。其实网页的Anywhere就是响应式Web设计，说的再白一点，就是为了省时省力省钱，一次开发出来的网页，用一个URL，可以在不同终端设备上有不同的呈现方式。下面四张图就是一张网站所作的响应式设计。

OK！概念就是这样的，本人一直以屌丝自居，所以这个定义也多少带着点屌丝的意味，娱乐一下。。。呀，有点冷，不闹了，下面我们看看这种多种终端设备要求网页不同呈现方式的需求下，都做过哪些尝试呢？

1、网页代码的单纯转换：为了让用户在手机这种移动设备上一样可以访问我们PC端网页，我们最初的响应式Web设计的尝试就是开发同学单纯的把PC端网页的源代码直接转换成WAP对应的代码。

2、使用一些建站工具快速地搭建移动WAP网站。

3、针对不同的终端设备开发不同的版本，最常见的就是PC版本 + 移动版本，事实上我现在的工作很大程度上还是停留在这个层次上，在给一家著名的电商网站定制开发其对应的移动版本。其实这种定制化开发从开发、设计、更新、维护各个过程来说，工作量还是挺大的，但是谁让咱目前的工作就干这个呢，只要老板给钱，就得好好干。

4、通过PhoneGap框架将Web进行App化，但是APP化工作量巨大、用户必须下载安装、推广渠道复杂繁琐、SEO和他几乎绝缘。

因为我现在主要是从事移动终端设备的Web开发工作，事实上在我日常工作中设计到响应式Web设计主要是在各种移动终端中的响应式设计。所以我个人对于响应式Web设计的理念是：根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向、屏幕分辨率等）对页面内容和布局进行相应的响应和调整。具体的实现方式有弹性网络、布局、图片、CSS3、JS、HTML5等的使用。这样无论用户用android设备还是ios设备，无论用户用手机还是pad平板，我们都能够自动调整页面来适用用户不同的设备.

从背景介绍一文中，不难看出，现在移动互联网发展的浪潮越来越猛，所以个人建议，在做响应式Web设计的时候采用逐步增强的模式进行开发，先让你的移动网站支持手机竖屏→支持用户横屏行为→支持各种屏幕大小的手机→支持不同系统版本的手机（主要是android设备和ios设备）→支持pad平板→……同时针对移动网站设计和开发的一些规则和建议的总结，在我另外一篇文章《初探移动网站的架构和设计》中做了介绍，这里不再赘述。

响应式Web设计的概念就介绍到这里吧，最后总结一句：响应式Web设计并不是单纯地根据用户行为和设备环境进行简单的网页内容的调整和呈现方式的不同，它其实是一种全新的Web设计方式，而这种全新的设计方式的最终用途究竟是什么呢？其实就是一个字：爽，让用户用的爽才是王道！

响应式Web设计的方法

介绍完响应式Web的背景和概念之后，是时候该介绍具体的实现方法了，其实响应式Web设计的方法很简单，就是利用CSS3的媒体查询Media Queries和Viewport来解决问题的。

首先我们一起来看看Media Queries，这里我只会对其做一个简单的列举介绍。

通过媒体查询的设置，我们可以根据屏幕宽度、屏幕方向等各个属性来加载不同场景下不同的CSS文件来渲染页面的视觉风格。具体的使用方法有以下两种：

1、通过link标签：

<link rel="stylesheet" type="text/css" media="screen and (max-width: 479px)" href="testcssbywidth1.css" />

示例代码代表当当前屏幕宽度小于479px的时候，加载testcssbywidth1.css文件来渲染页面。

2、CSS中直接设置：

@media screen and (max-width:479px) {
    　　/* 具体的CSS属性设置 */
　　}

对于Media Queries的一些常用属性，只对常用的几个做一个简单列举说明，其他的属性请各位自行查阅相关资料：

width：描述终端设备显示区域的宽度，接受max/min的前缀；

height：描述终端设备显示区域的高度，接受max/min的前缀；

device-width：描述终端设备屏幕的宽度，接受max/min的前缀；

device-height：描述终端设备屏幕的高度，接受max/min的前缀；

orientation：描述终端设备处于横屏还是竖屏的状态，取值分别为：landscape/portrait。

当我们调整浏览器大小的时候，上面通过媒体查询属性的操作就可以完成响应式Web设计的工作，但是这却不能满足移动终端的浏览器，因为移动浏览器默认页面是为宽屏幕设计的，所以会把他缩小来适应小屏幕，但是终端设备却无法识别正确的宽度，所以光靠媒体查询是解决不了移动终端设备的响应式Web设计的。这个时候就必须使用viewport的meta标签来做一系列的设置，同样，下面我只给出一个简单列举说明，有兴趣的同学可以参考一些网上资料进行深入性的研究。

正常我们需要响应式Web设计的页面，在页面中都要加上viewport的设置：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi">

width=device-width：控制viewport的宽度，可以指定固定的值或者特殊的值，如device-width（设备宽度）。但是这个么设置有一个弊端，因为这个设置只有在竖屏状态下有效，横屏状态下，返回的却还是和竖屏状态下一样的宽度。

initial-scale=1.0：告诉浏览器初始化页面时不要对页面进行任何缩放的操作。

maximum-scale=1.0：告诉浏览器阻止页面放大，但是这样一来也禁止了用户手动放大或缩小页面，怎么说呢，美好的东西也会存在缺陷吧。

minimum-scale=1.0：告诉浏览器阻止页面缩小，同样带来上面的问题。

user-scalable=no：告诉浏览器禁止页面缩放。

target-densitydpi=device-dpi：分辨率的设置，通常可以取值：device-dpi（使用设备自身的dpi作为目标dp，不发生缩放）、high-dpi（使用高分辨率，中低分辨率场景下会相应缩小）、medium-dpi（使用中等分辨率，高低分辨率分别进行相应的放大和缩小，缺省值）、low-dpi（使用低等分辨率，中高分辨率相应放大）。

通过对viewport的设置，利用Media Queries的属性设置，你就可以做出响应式的Web页面。下面开始一步一步告诉你响应式Web设计怎么开始的：

允许网页宽度自动调整：就是在网页的中追加viewport meta的定义。

选取一个标准开发出具体页面：比如一个页面被要求对屏幕宽度为320px、480px、640px的三种场景下进行响应式设计，这个时候正常会选取320px下的标准先进行页面开发。

抽取最低标准下的CSS样式独立成外链样式文件：将320px下的CSS样式全部抽取成外链样式文件，响应式设计的页面HTML代码中，不要有任何CSS定义的代码

根据UEDMMs的视觉稿进行其他标准的CSS样式文件开发。

通过Media Queries属性设置来定义不同场景下加载不同的CSS样式文件。

通过以上几步之后，OK，你的第一个响应式Web设计的页面就正式完成了，那么下面就要开始测试了，当然你可以很老实的用每一种终端设备来进行测试，当然这个是有必要的，但是为了马上就能看到响应式设计的效果，我推荐一个工具（http://dfcb.github.io/Responsivator/）给你，试试吧，你会觉得很有快感的。

为什么现在这么很多网站都选择响应式Web设计呢？主要优势个人感觉有以下几个方面：

1、给用户更好的视觉呈现：

不同的屏幕下页面的呈现方式不一样，这样可以给不同终端的用户不同的视觉体验。

2、降低开发的成本：

响应式Web设计相对于定制开发还是APP开发，无论是从开发资源投入、开发工时等各个方面都节省了不少，正所谓省时省力省钱，何乐而不为呢？

3、入口只有一个：

不管你用什么终端访问网页，URL都是一个。

响应式Web设计的优化

这篇文章主要说说在进行响应式Web设计的过程中，涉及到页面的一些需要进行优化的地方：

1、 轻量级的Javascript库：

针对PC端网页当然会首选jQuery来作为前端javascript库，但是针对移动端来说，jQuery太重，而现在针对移动端来说，有很多优秀的框架可供使用，jQuery Mobile、YUI、XUI等是不错的框架，但是个人比较倾向于zepto。不过zepto预定义的一些事件，比如触屏滑动的swipe事件，在ios上完美支持，但是在android上，有些浏览器确实不支持的，这时候就需要寻求与一些第三方的javascript插件库，好在现在网上有很多优秀的第三方javascript插件库可供使用，所以各位按需索取吧。

2、 减少HTTP请求次数：

一个页面的初始加载使用HTTP请求来操作，没有任何问题，但是页面中比如翻页、筛选之类的操作，如果再使用完整的HTTP请求来处理的话，会加大网络传输的数据量，因为移动端有一个特殊的限制，就是用户的网络流量是有限的，超过之后会要交钱的。这时候针对这些页面内部的部分操作，可以使用Ajax异步请求来完成，针对短期内不会变化的一些数据，可以使用服务器端缓存、前端缓存等机制来保存这些数据，这样可以减少用户一定的数据请求量。

3、 压缩Javascript和CSS：

把页面中使用的Javascript代码和CSS代码进行压缩之后会有效地减少页面大小。

在线的Javascript代码压缩工具和在线CSS代码压缩工具有很多，而我在开发中会使用下面这两个：

1）Javascript压缩：http://www.jscompress.com/

2）CSS压缩：http://www.csscompressor.com/

4、 使用CDN来管理页面资源：

CDN的全称是Content Delivery Network，即内容分发网络。其基本思想是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。

我们可以把一个页面上使用的外链的Javascript文件、CSS文件、固定的ICON图标和图片放在CDN上，这样在访问网页的时候可以使用户可就近取得这些资源，解决网络拥挤的状况，提高用户访问网页的相应速度。

5、 列表图片实现“懒”加载：

移动终端设备因为屏幕大小有限，没有必要将全屏中的图片一次性加载进来，在网页加载的时候，我们可以选择只加载一个可视屏幕中的图片，当用户进行滑动页面的时候，再加载后续剩下的图片。

这个方案其实就是现在大家都说的图片延迟加载技术，只是我们同事在开发的过程中戏称为图片的“懒”加载，其实说到底是按需加载。比如你用淘宝搜索产品，你的移动设备一屏其实只能显示5张图片，那在页面初始加载的时候只加载5张图片，用户滑动页面的时候再加载5张图片，依此类推，这样用户滑到哪里就显示到哪里。

目前网上有一些优秀的延迟加载插件，不过我在具体开发过程中没有使用第三方插件，而是自己开发的一个插件来实现这种图片的“懒”加载，后续我单独介绍我开发的这个插件。

6、 图片显示的优化处理：

首先先说为什么响应式Web设计的时候我们要对图片的显示进行优化处理呢？比如说现在有一张图片，如果你用低分辨率的图片，在低分辨率上显示没有问题，但是在高分辨率机器上图片就会模糊不清，影响用户视觉体验。但是如果你一开始选用一张高分辨率的图片，这样虽然可以兼顾所有机器上的视觉体验，但是针对低端机器来说是很不公平的，因为这样会白白浪费用户的网络数据流量。

那我们应该如何处理呢？解决方法就是根据用户设备的分辨率来加载不同分辨率下的不同图片，这样既能给不同终端的用户一个很好的视觉体验，又不会白白浪费用户的网络数据流量。

① 针对分辨率、屏幕大小来优化图片的显示，这里介绍两种方法：

第一种，将页面<image>标签的src属性中使用适用于低分辨率的图片地址，而将其他中、高分辨率的图片地址使用HTML5的data-自定义属性来隐藏；然后通过Javascript来获取浏览器窗口的大小决定加载哪一张图片，用Javascript把<image>标签的src属性替换成所需要的data-自定义属性中的图片。

第二种：将加载的图片地址使用CSS样式来定义，然后通过Media Queries媒体查询机制来决定加载哪一张图片。

② 针对Retina屏幕做专门的图片优化，同样介绍两种方法：

第一种，将页面<image>标签的src属性中使用普通图片的地址，而将Retina屏幕使用的图片地址使用HTML5的data-自定义属性来隐藏；然后通过Javascript来判断Ratio大小决定是否加载Retina图片，如需加载使用Javascript把<image>标签的src属性替换成所需要的data-自定义属性中的Retina图片。

第二种：将加载的图片地址使用CSS样式来定义，然后通过Media Queries媒体查询机制来决定加载Retina图片，判断Retina屏幕的媒体查询机制代码如下：

@media only screen and (-webkit-device-pixel-ratio: 2) {

7、 使用对SEO友好的标签：

为了让我们的网页能够让搜索引擎更好的收录，我们需要在我们的页面中尽可能低使用对SEO友好的标签，比如<h1>、<strong>、…等，关于页面标签的SEO友好化改造，后期我会专门发文介绍。

终于完成了响应式Web设计这一个系列的四篇文章，有朋友说我应该把东西写在一片博文里，没必要分开写，大有追连续剧的感觉，其实这个先说抱歉，但是允许我说一声，我平时的工作很繁琐，又不想因为这些事情来影响自己生活的乐趣，所以我只能一点一点的写。也许还有人说我这四篇博文中水货很多，那没有办法，因为关于响应式Web设计我不是原创者，我充其量算一个总结着，所以一些理论的东西我必须得参考别人的，我不寄希望于别来从我文章里面能学到多少，其实写这些技术文章，主要的是让自己对一些知识点做一个很好的总结，既然总结了，就想分享出来，也许质量很不好，但是我用心了，各位，按需索取吧。同时，我还是比较期待我个人的后续其他方面的总结和分享。