第一：正确理解响应式布局
响应式网页设计就是一个网站能够兼容多个终端-而不是为每个终端做一个特定的版本。打个比方来说：现在社会有很多响应产品，例如折叠沙发，折叠床等等，当我们需要把沙发放到一个角落的时候，此刻沙发就好比div吧，而角落里的某个地方就好比父元素，由于父元素空间的改变，我们不得不调整div,让它能够依然放在角落里。在项目中会遇到不同的终端，由于终端分辨率不同，所以要想让用户体验更好，就要让页面能够兼容多个终端。
第二：响应式设计的步骤
1.布局及设置meta标签
当创建一个响应式网站，或者非响应式网站变成响应式的时候，首先要关注元素的布局。在创建响应式布局的时候先写非响应式布局，页面固定宽度大小。如果完成了非响应式那么再去添加媒体查询（Media Query)和响应式代码。这种操作更容易实现响应式特性。
当你已经完成了无响应的网站，做的第一件事是在你的 HTML 页面，粘贴下面的代码到和标签之间。这将设置屏幕按1：1的尺寸显示，在 iPhone 和其他智能手机的浏览器提供网站全视图浏览，并禁止用户缩放页面。
<meta name="viewport" content="width=device-width,initial- scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
user-scalable属性能够解决ipad切换横屏之后触摸才能回到具体尺寸的问题。
2.通过媒体查询来设置样式media query
media query 是响应式设计的核心，它能够和浏览器进行沟通，告诉浏览器页面如何呈现，假如一个终端的分辨率小于980px，那么可以这样写
@media screen and (max-width:980px){
#head { … }
#content { … }
#footer { … }
}
这里面的样式会覆盖掉之前所定义的样式。
3.设置多种视图宽度
假如我们要兼容ipad和iphone视图，我们可以这样设置：
/ipad/
@media only screen and (min-width:768px)and(max-width:1024px){}
/iphone/
@media only screen and (width:320px)and (width:768px){}
4.字体设置
到目前为止，开发人员用到的字体单位大部分都是像素，虽然像素在普通网站上是Ok的，但是我们仍然需要响应式字体。一个响应式的字体应关联它的父容器的宽度，这样才能适应客户端屏幕。
css3引入了新的单位叫做rem和em类似但对于Html元素，rem更方便使用。
rem是相对于根元素的，不要忘记重置根元素字体大小：
html{font-size:100%;}
完成后，你可以定义响应式字体：
@media (min-width:640px){body{font-size:1rem;}}
@media (min-width:960px){body{font-size:1.2rem;}}
@media (min-width:1200px){body{font-size:1.5rem;}}
5.响应式设计需要注意的问题
<1>宽度不固定，可以使用百分比
#head{width:100%;}
#conten{width:100%;}
6.图片处理
指图片处理的万能方法，就是图片液态化。“什么是图片液态化”呢？大家都知道水无形 能适合很多容器，那么假如我们把图片当做水 是不是就可以实现图片自适应问题了呢？
在html页面中的图片，比如文章里插入的图片我们都可以通过css样式max-width来进行控制图片的最大宽度，如：
#wrap img{
max-width:100%;
height:auto;
}
如此设置后ID为wrap内的图片会根据wrap的宽度改变已达到等宽扩充，height为auto的设置是为了保证图片原始的高宽比例，以至于图片不会失真。
除了img标签的图片外我们经常会遇到背景图片，比如logo为背景图片：
#log a{display:block;
width:100%;
height:40px;
text-indent:55rem;
background-img:url(logo.png);
background-repeat:no-repeat;
background-size:100% 100%;
}
background-size是css3的新属性，用于设置背景图片的大小，有两个可选值，第一个值用于指定背景图的width,第2个值用于指定背景图的height,如果只指定一个值，那么另一个值默认为auto。
background-size:cover; 等比扩展图片来填满元素
background-size:contain; 等比缩小图片来适应元素的尺寸
第三：响应式布局的实现原理
首先我们应该遵循移动端优先，交互和设计以移动端为主，pc则作为移动端的扩展，一个页面需要兼容不同终端，那么有两个关键点是我们需要去做到响应式的：响应式布局和响应式内容（图片、多媒体）
第四：响应式的优化，针对用户体验的改进。
1.减轻Javascript库负载
对于移动端来说，jQuery表现的太过厚重，而现在针对移动端的状态来说，有jQuery Mobile、YUI、XUI等可供选择的框架。
2.减少HTTP请求次数
移动端相比较PC端有一个特殊的限制需要考虑到，就是用户的网络流量是有限的。这时候针对这些页面内部的部分操作，可以使用Ajax异步请求来完成，针对短期内不会变化的一些数据，可以使用服务器端缓存、前端缓存等机制来保存这些数据，这样可以减少用户一定的数据请求量。
3.Javascript和CSS需要尽量压缩
把页面中使用的Javascript和CSS进行压缩之后会有效地减少页面大小。
4.用CDN管理页面资源
CDN的即内容分发网络，意在尽可能避开互联网上有可能影响数据传输速度和稳定性的环节，使内容传输的更稳定。
5.列表图片实现“懒”加载
移动终端设备因为屏幕大小有限，没有必要将全屏中的图片一次性加载完成，网页加载的同时，我们可以选择逐个加载，当用户进行滑动页面的时候，再继续加载图片。
6.图片显示的优化处理
根据用户设备的分辨率来加载不同分辨率下的不同图片，这样既能给不同终端的用户一个很好的视觉体验，又不会白白浪费用户的网络数据流量。
