响应式网页设计

名词解释

所谓的响应式设计，就是网页内容会随着访问它的视口及设备的不同而呈现不同的样式。
1.基于HTML.5和CSS3的RMD（Responsive Web design)响应式Web设计
2.随着视口（viewport）及设备（device）的不同呈现不同的样式（style）
3.利用弹性网络布局（fluid grid）、弹性图片/媒体（flexible images）、媒体查询（media queries）、媒体查询（media queries）等技术实现。

响应式网站设计(Responsive Web design简称RWD)的理念是:页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备;换句话说，页面应该有能力去自动响应用户的设备环境。
响应式Web设计就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。

为什么需要响应式设计

9459987-5d14aff3dbbf3aca.png

现在这个时代来说，手机成为人们日常生活中必不可缺的一种东西，人们出门宁愿不带钱也不肯不带手机出门，而手机屏幕的大小又不一样，根据上图可以知道市面上各种各样的屏幕分辨率的手机都有人使用，不同的屏幕分辨率对不同的网站显示的效果不一样，因此响应式设计有必要发展起来。

9459987-921d66e150f0b53d.png

9476218-03593fbe9c89657e.png

根据市场调查机构 statcounter 的数据，我们可以发现，无论是全世界还是在中国，手机的使用率都大过于电脑，所以为了给用户更好的体验，响应式网络设计有必要发展起来。

l 用户更容易在一个网址（而不是多个网址）上与高效设计的内容进行分享，互动；

l 长期的客户访问结果显示响应式网站的跳出率更低；

l 拥有更好用户体验以及更高的SEO排名和转化率

l 更容易做不同着陆页的映射和A / B测试

l 具有响应式设计的移动策略比以往任何时候都更重要。

采用网页设计web的例子

Curious Space：http://www.curiousspace.com

Curious Space的想法与Phases Magazine差不多，网站的滚动和断点设置合理，体验良好，同时在交互的过程中有一些小惊喜，比如鼠标hover住的图片会被置于顶层，logo的字母部分会随着滚动改变位置，最终变为整齐的两行文字，自然地变成导航栏的logo。

TB1NN83IFXXXXa3XVXXSutbFXXX.jpg

TB1qxt4IFXXXXbjXVXXSutbFXXX.jpg

没有采用响应式设计的例子

看你的iPhone浏览下网址http://themify.me/

20131028120508390.jpg

左边的截图是网站没有应用viewport标签时的表现效果，如你所见，页面碰到两边边界了。当我添加一个viewport标签来指定视口的宽度为1024px之后，它就会在边缘部分留下一点空隙。

解释RWD的三项组成科技

（一）弹性网络布局

弹性布局，又称“Flex布局”，是由W3C于2009年推出的一种布局方式。可以简便、完整、响应式地实现各种页面布局，而且已经得到所有主流浏览器的支持，因此可以放心使用。

首先我们了解两个基本概念，在接下来的内容中会频繁提到：

a）容器：需要添加弹性布局的父元素；

b）项目：弹性布局容器中的每一个子元素，称为项目；

其次要了解两个基本方向，这个牵扯到弹性布局的使用：

a）主轴：在弹性布局中，我们会通过属性规定水平/垂直方向为主轴；

b）交叉轴：与主轴垂直的另一方向，称为交叉轴。

（二）弹性图片/媒体

许多只能手机都使用了一个比实际屏幕尺寸大很多的虚拟可视区域（布局视口），主要目的就是让页面在智能手机端阅读时，不会因为实际可视区域变形。所以你看到的页面还是普通样式，即一个全局缩小后的页面。为了让智能手机能根据媒体查询匹配对应样式，让页面在智能手机中正常显示，特意添加了一个meta标签。这个标签的主要作用就是让智能手机浏览页面时能进行优化，并且可以自定义界面可视区域的尺寸和缩放级别。

（三）媒体查询

使用媒体查询，你可以针对不同的媒体类型定义不同的样式。
媒体可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，媒体是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

RWD与前后端的关系

图片1.png

Web前端:顾名思义是来做Web的前端的。这里所说的前端泛指Web前端，也就是在Web应用中用户可以看得见碰得着的东西。包括Web页面的结构、Web的外观视觉表现以及Web层面的交互实现。
Web后端：后端更多的是与数据库进行交互以处理相应的业务逻辑。需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等。
RWD则类似是链接前端与后端的伺服器，他们相互链接相互影响。

引用教科书

响应式网页设计能够根据视口变化控制页面文档流，但我们可以走得更远。HTML5提供了比HTML4更多且更加语义化的标签。
CSS3的媒体查询是响应式设计不可或缺的组成部分，CSS3的其他功能给了我们前所未有的灵活性。我们将挣脱背景图像和
复杂的JavaScript代码的羁绊拥抱简单的CSS3渐变、投影、字体、动画和变换。
（本段来自教科书）

以上来自网络与教科书。