响应式网页设计
定义：
- 响应式Web设计(Responsive Web design)是：页面的设计与开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整，是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。是基于HTML5和CSS3的RWD(Responsive Web Design)响应式Web设计。利用弹性网格布局(fluid grid)、弹性图片／媒体(flxible images)、媒体查询(media queries)等技术实现。
RWD是什么
1.面对不断扩展的浏览器和设备应对方案
- 可以让一个网站同时适配多种设备和多个屏幕
3.可以让网站的布局和功能随用户的使用环境（屏幕大小、输入方式、设备/浏览器能力）而变化
4.基于HTML5和CSS3的RWD不需要以来后端方案
为何需要"响应式网页设计"
响应式网页设计是互联网迅速发展时代的必要产物。根据调查，手机在2017年的三月到2018年，都一直居高临下，也就是说，随着手机的广泛使用，人们对人性化和便捷化的网页的要求越来越高。而且手机的类型各种各样，每一种手机都会有自己所属于的分辨率，这也是为什么响应式设计是一个十分必要的选择。如果没有使用响应式网页设计，那么设计师就要为每一种分辨率设计一种代码，这是几乎不可能的事。
例子：
- 响应式网页设计如今的应用已经越来越宽泛了，比如我们所熟悉的购物网站--淘宝，也是用了响应式设计：
微信图片_20180309104342.png
（具体的操作请点击链接：https://www.taobao.com/） - 而同样作为购物网站，天猫却没有使用响应式设计：
微信图片_20180309104023.png
（具体的操作请点击链接：https://www.tmall.com/?ali_trackid=2:mm_26632323_6762370_25910656:1520562918_305_1678265331） - 同样作为购物网站，为什么天猫没有采用响应式设计，而淘宝却有呢？原因之一猜测是即使做了响应式设计，只会导致需要加载的css文件更大，页面加载的资源体积不会更小，而响应式设计通常是面向移动端的场景，依靠移动数据加载会比桌面端慢得多也会消耗更多用户关心的流量，与其这样不如重定向到一个单独的轻量级的基于H5的web app，也便于分离和定制。
链接：https://www.zhihu.com/question/22016859/answer/22393957
关系：
- 想必很多人都不了解RWD的前端和后端的关系吧，（其实我也不是很清楚），但没关系，因为网络几乎是万能的。RWD的前后端既有联系，又有区别
- 区别：
- Web前端: 前端泛指Web前端，也就是在Web应用中用户可以看得见碰得着的东西。包括Web页面的结构、Web的外观视觉表现以及Web层面的交互实现。web前端需要掌握的有脚本技术javascript DIV+CSS现下最流行的页面搭建技术，ajax和jquery以及简单的后端程序等。
- Web后端：后端更多的是与数据库进行交互以处理相应的业务逻辑。需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等。 后端的话可供开发的语言有 asp、php、jsp、.NET 这些后端开发语言的话搭建环境都不一样。
链接：[WED前端和后端的区别]（http://www.aseoe.com/show-23-391-1.html）
- 联系：
1、不管是前端还是后端，他们的最终目的是为了整个网络网页所服务的，前端和后端是相互配合的关系，尽管他们所负责的工作是不一样的。
- 比如：RWD前端：精通HTML，能够书写语义合理，结构清晰，易维护的HTML结构。 2）精通CSS，能够还原视觉设计，并兼容业界承认的主流浏览器。3）熟悉JavaScript，了解ECMAScript基础内容，掌握1~2种js框架，如JQuery；
- RWD后端;精通面向对象分析和设计技术，包括设计模式、UML建模等; 5）熟悉网络编程，具有设计和开发对外API接口经验和能力，同时具备跨平台的API规范设计以及API高效调用设计能力
2、前端和后端在同一个Web时，是需要签订一个“协议”的。如果web应用是基于API的，那么API文档就是你们之间的协议如果web应用是基于template rendering的，那么Django的template就是你们之间的协议（自然前端是需要懂一些template语言的，Django有针对前端开发者的template文档），而协议就是前后端协作的基础和规范。
3、 前端发来请求，后端解析发来的请求字段，然后去数据库取数据出来传递给前端。你所需要做的就是写好文档，说明这个接口返回什么数据类型，是json还是字符串还是具体什么，如果是json还得说明一下里面有哪些返回值.
组成：
在WRD有几个关键组成部分：
viewport meta标签： 页面头部的meta说明，可以通过viewport meta标签去让你的html页面的的宽度能根据设备分辨率让浏览器的可视宽度来适应，也可以在这里设置页面的缩放比例等等，这样在成比例的分辨率设备下，就可以更简单地实现响应式。
弹性网格布局：网格布局是一种新的布局方法，该方法使你能够基于固定数量、浏览器窗口中的可用空间或二者组合划分网页主要区域的空间。通过将网格布局与媒体查询（@media）结合使用，可以使布局无缝地适应设备外形尺寸、方向、可用空间等因素的变化。
响应式图片：根据用户的设备和使用场景提供合适的图片？？？
媒体查询：媒体查询包含媒体类型和零个或多个检测媒体特性的表达式。width，height和color都可用于媒体查询的特性。使用媒体查询，可以不必修改内容本身，而让网页适配不同的设备。
-
具体内容请点击链接：https://www.douban.com/group/topic/37338038/
http://blog.sina.com.cn/s/blog_b363cedf0101eewi.html
