什么是响应式网站？
响应式网站设计是一种网络页面设计布局，其理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境进行相对应的布局。
页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。
响应式图片：
响应式图片技术思想：不仅要同比的缩放图片，还要在小设备上降低图片自身的分辨率。这个技术的实现需要使用几个相关文件，我们可以在Github上获取。包括一个JavaScript文件(rwd-images.js)，一个.htaccess文件，以及一些范例资源文件。大致的原理是，rwd-images.js会检测当前设备的屏幕分辨率，如果是大屏幕设备，则向页面head部分中添加BASE标记，并将后续的图片、脚本和样式表加载请求定向到一个虚拟路径"/rwd-router"。当这些请求到达服务器端，.htacces文件会决定这些请求所需要的是原始图片还是小尺寸的"响应式图片"，并进行相应的反馈输出。对于小屏幕的移动设备，原始尺寸的大图片永远不会被用到。
UIKit
UIkit 是一个轻量级、模块化的前端框架，可快速构建强大的web前端界面。它根据不同的屏幕分辨率与上网设备，会自动做出响应，提供一致的体验。
Bootstrap
由两个Twitter员工开发并开源的前端框架，已经更新到了v4.1.2版本，在Github上非常火爆，在国内也有很多粉丝，值得一试。
Adobe Edge Inspect
对移动开发者尤其有用的工具，其前身是 Adobe Shadow，用于帮助设计师和开发者同时在多个移动设备上预览应用设计，发现和解决跨平台问题。
Responsive Web Design Sketch Sheets
如果你还在用纸和笔来创建你的实体模型，你可以用这些现有的草图来设计你的交互网站了。
Foundation
号称是世界上最先进的响应式前端框架。
SimpleGrid
轻量级的响应式 CSS 网格系统，让你可以快速创建适应于手机和平板电脑的网站。
Responsive Testing
这个工具可以让你预览你设计网页在不同设备上的效果，只需要访问它的网站并输入你网站的地址就可以看到了。
响应式网站概念：
弹性网格布局
弹性图片
媒体查询
这三大主流技术使得响应式网站在移动端的各种分辨率的手机、平板电脑和PC端等其他一些高分辨率的设备能够有平分秋色的体验与适应。它是一项多项技术结合的综合体。
响应式网站的设计理念：
断点的选择（width、min-width、max-width）：
小屏幕设备：小于等于480px;
中等屏幕设备：481 ~ 800px；
大屏幕设备：800 ~ 1400px；
巨屏幕：1400+px；
响应式网站的优点：
1、减少工作量，网站设计的代码只需要设计和编写一份就好，多出来的工作量就是js脚本的修改和css文件的对于屏幕的适配代码
2、节省时间
3、每个设计都能得到正确的设计，网站是面向未来的。了可扩展性强
4、搜索优化
5、能够满足更多的系统功能
缺点：
1、用户体验不能再优化
2、会加载更多的样式表和脚本文件
3、对于来版本的浏览器是不兼容的
4、难以精确定位和控制