响应式网页设计

响应式Web设计 :

响应式Web设计是在开发和设计网站过程中产生的一种方式，它的目的是让内容布局能随用户使用显示器的不同而变化。再明确点说，这种设计概念，就是让原本1292像素宽，4栏的内容，能够很好地显示在1025像素宽的用户屏幕上，同时还能自动简化成2栏。当然，让它很好的适应智能手机和其他种类电脑的屏幕也就成了水到渠成的事了。这种特殊的设计形式就被成为“响应式Web设计”

RWD ：

就是英文缩写响应式网站设计(Responsive Web design)

HTML5 ：

万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次修改

CSS3 ：

CSS3是层叠样式表的缩写。在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。

IE ：

Internet Explorer，是美国微软公司推出的一款网页浏览器。原称Microsoft Internet Explorer(6版本以前)和Windows Internet Explorer(7、8、9、10、11版本)，简称IE。

文本编辑器 :

文本编辑器是用作编写普通文字的应用软件，它与文档编辑器（或数字处理器）不同之处在于它并非用作桌面排版（例如文档格式处理），它常用来编写程序的源代码。

视口：

浏览器中用于呈现网页的区域叫视口（viewport）

max-width：

JavaScript中的语法，用于定义元素的最大宽度。

(互联网与新媒体)市场调查机构 statcounter 的数据所制的图和表来举例说明为何需要"响应式网页设计"

image.png

我们可以从该图表看出上网设备屏幕之间的差距也达到了前所未有之大，而响应Web设计可以让一个网站同时适配多种设备和多个屏幕，可以让网站的布局和功能随用户的使用环境（屏幕大小、输入方式、设备/浏览器能力）而变化。可以兼容所有尺寸的屏幕，随着手持设备（手机）屏幕尺寸繁多，也有很好的兼容性；而且开发一次，pc版和触屏版，手机版融合为一。

image.png

可以看出用手机上网的占比越来越大，手机品目的分辨率也是有所不同的，面对这种情况，响应式Web设计的重要性也显现出来了。

我们来看下用了响应式Web设计的网页

image.png

这是用电脑上网页的截图

微信图片_20180312164329.jpg

这是用手机登陆网页的图

腾讯网是用了响应式Web设计让网页在不同设备不同分辨率的情况下改变网页的布局和功能，让用户体验更加好。

现在我们来看看没有用响应式Web设计的网页

image.png

电脑登陆的教务系统

image.png

这是手机登陆的教务系统

可以看的出来 有没有响应式web设计的差距还是很大的对用户的体验来说。

RWD的三项组成科技：

弹性网格布局：

其实现方法则是大多数组件（包括主容器）都设成百分比宽度，并且根据用户的屏幕分辨率自适应。

弹性图片：

弹性图片指的是不给图片设置固定尺寸，而是根据流体网格进行缩放，用于适应各种网格的尺寸。而实现方法是比较简单，一句代码就能搞定的事情。

媒体查询：

媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。

RWD和前后端的关系：

前端顾名思义是来做Web的前端的。我们这里所说的前端泛指Web前端，也就是在Web应用中用户可以看得见碰得着的东西。包括Web页面的结构、Web的外观视觉表现以及Web层面的交互实现。是你所看到的网页页面，包括控件布局，色调，字体，控件响应等等，技术层面上前端=HTML+CSS+JAVASCRIPT。后端则是网站的逻辑部分，主要涉及数据库，动态语言如PHP、ASP、JSP等。需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等。
Marcotte(2010)：http://www.cnblogs.com/muyan927/p/5701890.html
RWD：https://baike.baidu.com/item/%E5%93%8D%E5%BA%94%E5%BC%8F%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/2519669?fr=aladdin