响应式网页设计

响应式网页设计

定义：

• 响应式Web设计(Responsive Web design)是：页面的设计与开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整，是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。是基于HTML5和CSS3的RWD(Responsive Web Design)响应式Web设计。利用弹性网格布局(fluid grid)、弹性图片／媒体(flxible images)、媒体查询(media queries)等技术实现。

RWD是什么

1.面对不断扩展的浏览器和设备应对方案

2. 可以让一个网站同时适配多种设备和多个屏幕
   3.可以让网站的布局和功能随用户的使用环境（屏幕大小、输入方式、设备/浏览器能力）而变化
   4.基于HTML5和CSS3的RWD不需要以来后端方案

为何需要"响应式网页设计"

来自http://gs.statcounter.com 的数据

响应式网页设计是互联网迅速发展时代的必要产物。根据调查，手机在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

介绍：http://alistapart.com/article/responsive-web-design

• 响应式Web设计：HTML5和CSS3实战将当前Web设计中热门的响应式设计技术与HTML5和CSS3结合起来，为读者全面深入地讲解了针对各种屏幕大小设计和开发现代网站的各种技术。不仅讨论了媒体查询、流式布局、相对字体、响应式媒体，更将HTML5和CSS3的相关知识点一并讲解，是学习最新Web设计技术不可多得的佳作。
  《响应式Web设计：HTML5和CSS3实战》适合各个层次的Web开发和设计人员阅读。响应式Web设计