什么是响应式web设计
什么是响应式web设计
现在开发一个产品，基本上都会需要兼顾 PC端和 移动端。
一般有两种思路:
1.为每个终端做一个特定的版本,并给2级域名,根据终端环境调用不同的版本代码。
2.一个网站能够兼容多个终端
而响应式设计 就属于 让一个网站能够兼容多个终端。
响应式Web设计(Responsive Web design)的理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相对应的布局。
也就是自适应，就是可以自动识别屏幕宽度、并做出相应调整的网页设计。
响应式设计需要学什么
CSS3 Media Queries
开始研究响应式web设计朋友，CSS3 Media Queries是入门。
CSS3 Media Queries能实现页面的弹性化。
例如：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
在head里加入这条元标签，那移动浏览器中页面将以原始大小显示，并不能缩放。不让浏览器缩放目的是保证网页能自适应屏幕的完整性，避免网页混乱。
IE8或者更早的浏览器并不支持Media Query。你可以使用media-queries.js或者respond.js来为IE添加Media Query支持。
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
在CSS中加入语句：
@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/}
每个站点应该有多个判断，1024px，768px，650px，500px，400px，350px。
这意味着宽度在1024px以下的屏幕，会呈现六种不同的效果。
唯一不同的是加入了display:none，不显示某些内容。所以通过CSS观察发现，屏幕越小，显示的内容就越来越少。
响应式图片
响应式图片技术思想：不仅要同比的缩放图片，还要在小设备上降低图片自身的分辨率。这个技术的实现需要使用几个相关文件，我们可以在Github上获取。
包括一个JavaScript文件(rwd-images.js)，一个.htaccess文件，以及一些范例资源文件。大致的原理是，rwd-images.js会检测当前设备的屏幕分辨率，如果是大屏幕设备，则向页面head部分中添加BASE标记，并将后续的图片、脚本和样式表加载请求定向到一个虚拟路径"/rwd-router"。当这些请求到达服务器端，.htacces文件会决定这些请求所需要的是原始图片还是小尺寸的"响应式图片"，并进行相应的反馈输出。对于小屏幕的移动设备，原始尺寸的大图片永远不会被用到。
响应式的前端框架
UIKit
UIkit 是一个轻量级、模块化的前端框架，可快速构建强大的web前端界面。它根据不同的屏幕分辨率与上网设备，会自动做出响应，提供一致的体验。
Bootstrap
由两个Twitter员工开发并开源的前端框架，目前已经更新到了v3.0版本，在Github上非常火爆，在国内也有很多粉丝，值得一试。
Adobe Edge Inspect
对移动开发者尤其有用的工具，其前身是 Adobe Shadow，用于帮助设计师和开发者同时在多个移动设备上预览应用设计，发现和解决跨平台问题。
Responsive Web Design Sketch Sheets
如果你还在用纸和笔来创建你的实体模型，你可以用这些现有的草图来设计你的交互网站了。
Foundation
号称是世界上最先进的响应式前端框架。
SimpleGrid
轻量级的响应式 CSS 网格系统，让你可以快速创建适应于手机和平板电脑的网站。
Responsive Testing
这个工具可以让你预览你设计网页在不同设备上的效果，只需要访问它的网站并输入你网站的地址就可以看到了。
