响应式网页设计

原文地址：http://www.cnblogs.com/lhb25/p/must-read-links-for-web-designers-and-developers-volume-17.html 　　《Web 前端开发精华文章推荐》2013年第五期（总第十七期）和大家见面了。梦想天空博客关注 前端开发 技术，分享各种增强网站用户体验的 jQuery 插件，展示前沿的 HTML5 和 CSS3 技术应用，推荐优秀的 网页设计 案例，共享精美的设计素材和优秀的 Web 开发工具，希望这些精心整理的前端技术文章能够帮助到您。 JavaScript 【干货分享】32本优秀的 JavaScript 免费电子书 Verlet-js：超炫的开源 JavaScript 物理引擎 优秀教程：创建基于 Ajax 的文件拖放上传功能 Two.js – 为现代浏览器而生的 2D 绘图 API Squel.js – 基于 JavaScript 的 SQL 查询构建器 PathFinding.js – 综合性的 JavaScript 路径查找库 FlipClock.js 制作精美的时钟、定时器和倒计时功能 jQuery Web 开发最有用的50款 jQuery 插件《图片特效篇》 jQuery.mmenu – 用于移动 Web 项目的光滑菜单 jQuery 插件：用于移动项目的响应式音频播放器

这篇文章主要说说在进行响应式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：

　　介绍完响应式Web的背景和概念之后，是时候该介绍具体的实现方法了，其实响应式Web设计的方法很简单，就是利用CSS3的媒体查询Media Queries和Viewport来解决问题的。 　　首先我们一起来看看Media Queries，这里我只会对其做一个简单的列举介绍。（有兴趣深入的同学可以参考： http://www.w3.org/html/ig/zh/wiki/CSS3%E5%AA%92%E4%BD%93%E6%9F%A5%E8%AF%A2 ） 　　通过媒体查询的设置，我们可以根据屏幕宽度、屏幕方向等各个属性来加载不同场景下不同的CSS文件来渲染页面的视觉风格。具体的使用方法有以下两种： 通过link标签： <link rel="stylesheet" type="text/css" media="screen and (max-width: 479px)" href="testcssbywidth1.css" /> 示例代码代表当当前屏幕宽度小于479px的时候，加载testcssbywidth1.css文件来渲染页面。 CSS中直接设置： @media screen and (max-width:479px) { /* 具体的CSS属性设置 */ } 对于Media Queries的一些常用属性，只对常用的几个做一个简单列举说明，其他的属性请各位自行查阅相关资料：

　　不是专业前端，可2011年底至今大部分时间在做着一个前端开发工程师的事情，所以多少也有点总结，多少也有点“经验”和分享。 响应式Web设计不是我首创的概念，早就有了，我这里只不过把自己最近这段时间关于这方面的研究做了一个总结。 至于这篇文章能给你带来多大的益处我保证不了，但是只从读完这篇文章之后你至少能明白以下几点： 为什么要做响应式Web设计？ 什么是响应式Web设计？ 如何做响应式Web设计？ 送你几个关于响应式Web设计优化的小建议！ 　　在说响应式Web设计前，我们先来看看移动互联网的发展现状： 移动互联网用户规模接近PC互联网用户规模，市场规模占比进一步增加，移动互联网成为主流（数据来源：CNNIC、艾瑞咨询）； 　　 　　 网络设备多元化，智能手机将成为网络体验获取的重要终端。 　　 　　从移动互联网的用户规模、市场规模、终端设备三个方面做了一个简单的说明，不难看出，未来互联网发展的几个方向： PC不再是互联网的主要入口，而且很有可能沦为一个次要入口； 移动已经成为第一屏幕； 移动技术将引领潮流。 　　移动互联网正走向一个百花齐放的时代： 　　 　　中国互联网正在往移动方向发展，移动设备正在超过PC设备，成为互联网的常见设备，在这样一个客观背景下，我们不得不问自己：如何才能在不同的设备上呈现给用户同样的Web网页呢？ 　　 　　很显然，答案就是——响应式Web设计

　　首先感谢大家对第一篇背景介绍一文的支持，今天将对响应式Web设计的概念进行一个大概的介绍，当然这一篇也不是什么干货，只是作为一个主题来说，概念的介绍必不可少，下一篇就应该有点干货了。 　　从背景介绍一文中，我们可以得到这样一个结论：互联网正在快速迅猛地向移动终端发展，这样对于网页就有了一个Anywhere的需求。其实网页的Anywhere就是响应式Web设计，说的再白一点，就是为了省时省力省钱，一次开发出来的网页，用一个URL，可以在不同终端设备上有不同的呈现方式。下面四张图就是一张网站所作的响应式设计。 　　 OK！概念就是这样的，本人一直以屌丝自居，所以这个定义也多少带着点屌丝的意味，娱乐一下。。。呀，有点冷，不闹了，下面我们看看这种多种终端设备要求网页不同呈现方式的需求下，都做过哪些尝试呢？ 网页代码的单纯转换：为了让用户在手机这种移动设备上一样可以访问我们PC端网页，我们最初的响应式Web设计的尝试就是开发同学单纯的把PC端网页的源代码直接转换成WAP对应的代码。 使用一些建站工具快速地搭建移动WAP网站。 针对不同的终端设备开发不同的版本，最常见的就是PC版本 + 移动版本，事实上我现在的工作很大程度上还是停留在这个层次上，在给一家著名的电商网站定制开发其对应的移动版本。其实这种定制化开发从开发、设计、更新、维护各个过程来说，工作量还是挺大的

你调整了浏览器，笑容攀上脸颊。你感到非常开心，认为自己实现了友好移动的目标。在正式讨论前，让我来预测下未来：你会失掉用户和经济效益，如果你把响应式网页作为唯一目标和唯一的解决办法。 好消息是，你可以改善它。 在这篇文章中，我们会谈到移动互联网和响应式设计的关系，首先将介绍如何巧妙的运用响应式设计，为什么性能对移动端非常重要，为什么响应式设计不能作为你网站的目标，最后技术的性能问题帮助我们更好的理解这问题。 自2000年开始，设计者和开发者就把移动设备的问题过于简单化，以至于现在仍然有人认为响应式网页设计能解决一切问题。 大家必须明白，凌驾于任何目标，移动网络体验必须和闪电一样快。迅速、实用、兼容的体验对所有移动设备都是挑战。当你使用响应式设计时，这些挑战都存在。从一开始就重视性能会让过程容易些。 响应式设计是很棒，但不是万能钥匙。如果你在移动设备上一味坚持，在转换率后就可能隐藏着性能问题。大约有11%的网站是响应式，这个数字每月都在增长，所以现在是谈论这个问题的时机了。 据Guy Podjarny研究，72%的响应式网站不分屏幕大小都提供相同的字节，尽管这会降低移动网络连接。不是所有用户都有耐心等着网站加载。 对响应式设计存在的问题有了基本认识，我们就能减低它带来的损失。 移动网站来自过去 我不是说你不应该采用响应式设计或者去用m.*的子域名。事实上，现在社会分享无处不在，不分设备