响应式网页设计

名词解释

所谓的响应式设计,就是网页内容会随着访问它的视口及设备的不同而呈现不同的样式。
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设计就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本。这样,我们就可以不必为不断到来的新设备做专门的版本设计和开发了。

为什么需要响应式设计

响应式网页设计_第1张图片
9459987-5d14aff3dbbf3aca.png

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


响应式网页设计_第2张图片
9459987-921d66e150f0b53d.png
响应式网页设计_第3张图片
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。


响应式网页设计_第4张图片
TB1NN83IFXXXXa3XVXXSutbFXXX.jpg
响应式网页设计_第5张图片
TB1qxt4IFXXXXbjXVXXSutbFXXX.jpg

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

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

响应式网页设计_第6张图片
20131028120508390.jpg

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

解释RWD的三项组成科技

(一)弹性网络布局

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

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

a)容器:需要添加弹性布局的父元素;

b)项目:弹性布局容器中的每一个子元素,称为项目;

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

a)主轴:在弹性布局中,我们会通过属性规定水平/垂直方向为主轴;

b)交叉轴:与主轴垂直的另一方向,称为交叉轴。

(二)弹性图片/媒体

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

(三)媒体查询

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

RWD与前后端的关系

响应式网页设计_第7张图片
图片1.png

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

引用教科书

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

以上来自网络与教科书。

你可能感兴趣的:(响应式网页设计)