响应式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：

　　介绍完响应式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版本 + 移动版本，事实上我现在的工作很大程度上还是停留在这个层次上，在给一家著名的电商网站定制开发其对应的移动版本。其实这种定制化开发从开发、设计、更新、维护各个过程来说，工作量还是挺大的