响应式网页设计:互联网web产品RWD概念

  RWD(Responsive Web Design)可称为自适应网页设计、响应式网页设计、响应式网页设计等等,是一种可以让网页的内容可以随着不同的装置的宽度来调整画面呈现的技术,让使用者可以不需要透过缩放的方式来浏览网页,大大的提升画面的可浏览性及使用界面的亲和度;然而这对于行动商务越来越受到重视的现今来说,随之也越来越倍受重视。

  近几年,随着行动装置(智慧型手机、平板)的普及,以及行动上网服务的使用率越来越高,传统网页的标准已经无法符合这些装置的需求来呈现了,尤其是以flash制作的动画,受限于行动装置运算力不足的限制之下,已经没有行动装置可以直接浏览flash制作的网页了。虽然可透过一些特殊的浏器APP软件来观看,但方便性却大大的降低。

  而RWD又是如何达到的呢?

  主要是以HTML5的标准及CSS3中的media queries来达到的。

  在HTML5的标准中,我们可以指定页面的宽度可以依照装置的检视宽度来呈现,再利用CSS3的media queries来设定不同宽度下使用不同的CSS来呈现页面。因此设计师在设计网页时,就必须要针对不同的宽度下的画面编写不同的CSS档案供浏览器来读取。

  RWD的优点:

  1.可使用同一套原始码来撰写CSS,可以减少版面重新制作的时间。

  2.可同时针对不同的分辨率来设定,增加页面的可用性。

  3.对于搜寻引擎的收录不会造成影响,不影响SEO的结果。

  4.开发时间较APP来说可以快速很多。

  5.学习门坎较低,对于已经从事网页设计的人员来说,此技术只是建构在原本的DIV+CSS之上的一门技术,因此学习起来相对容易。

  RWD的缺点:

  1.因为在同一页面会置入多种分辨率的CSS档案会增加页面传输量,加载的时间也会加长。

  2.若在各种分辨率下的画面都需校槁的话,在制作版面的时间会大大的增加。

  3.无法提供像APP般功能强大的功能,或是各种酷炫的拖拉效果。

  4.开发时程较传统网页需相对多的时间。

  以上提供RWD的各项优缺点分析。

  最后,想要可以体验RWD的功能前,还有一项最重要的基本要素,那就是浏览的支持度。由于RWD是建立在CSS3的基础之下,因此要支持RWD也必须要支持CSS3的浏览器才行,以下列出各大浏览器支持的版本:

  ?Internet Explore 9以上

  ?Chrome、Firefox、Opera使用自动更新至最新版本即可

  虽然还有些人撰写了JS来让IE8以下的版本来支持CSS3等语法,但目前还是支持度不佳,且IE8的使用者还在不断的减少中,因此使用新的浏览器才是真正体验RWD的最好办法。

  本篇文章由程序员客栈(www.proginn.com)整理简单的介绍了RWD的基本观念,并分析其优缺点,让有意使用RWD的人们对于此技术有更多的了解。

时间: 2024-08-28 21:22:10

响应式网页设计:互联网web产品RWD概念的相关文章

响应式网页设计:web产品RWD概念

RWD(Responsive Web Design) 可称为自适应网页设计.响应式网页设计.响应式网页设计等等,是一种可以让网页的内容可以随着不同的装置的宽度来调整画面呈现的技术,让使用者可以不需要透过缩放的方式来浏览网页,大大的提升画面的可浏览性及使用界面的亲和度:然而这对于行动商务越来越受到重视的现今来说,随之也越来越倍受重视. 近几年,随着行动装置(智慧型手机.平板)的普及,以及行动上网服务的使用率越来越高,传统网页的标准已经无法符合这些装置的需求来呈现了,尤其是以flash制作的动画,受

响应式网页设计简单入门(强烈推薦!!!!)

响应式网页设计简单入门 Overview: 构造基本的HTML页面 动态加载样式表 Viewport 字体缩放 侧边栏 导航菜单 图片自适应 其他 总结 说到响应式网页设计(Responsive web design),最近在谷歌加上碰到个奇葩贴子,通过一个原始到无法再简单的网页Motherfucking Website及满屏幕的fuck道出了网页设计的真谛,这孩子不是个激进分子就是个报复社会型的货没错,虽然整篇文章就像是泼妇骂街,但我特么是笑着读完的.. 统计了下全文共用Fuck (包括fuc

说说响应式网页设计

在这里我只说说我对响应式网页设计的理解,具体实现过程就先不说了~ 响应式网页设计(RWD,Responsive Web Design)这个术语,由伊桑·马科特(Ethan Marcotte)提出.他在A List Apart发表了一篇开创性的文章,将三种已有的开发技巧(弹性网格布局.弹性图片.媒体和媒体查询)整合起来,并命名为响应式网页设计. 响应式网页设计正是前端界“以人为本”的体现.Web的初衷就是为了让信息更好的传递交流,方便人们无障碍的获取信息.而网页就是人们获取.传递信息的一个接口,信

响应式网页设计【转载】

概念 响应式网页设计最初是由 Ethan Marcotte 提出的一个概念:为什么一定要为每个用户群各自打造一套设计和开发方案?Web设计应该做到根据不同设备环境自动响应及调整.当然响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等,它更像是一种对于设计的全新思维模式:我们应当向下兼容.移动优先. 背景 PC互联网加速向移动端迁移:2012年12月底我国网民规模达到5.64亿,互联网普及率为42.1%,手机用户占网民总数的74.5%.预计到2015年,移动互联网的数据流量将超越P

HTML5+CSS3的响应式网页设计:自动适应屏幕宽度

这几天都在修改博客上面的样式.本来用的是d83.0的模板.自己又修改了许多地方,其中自己修改的一些地方在手机里面显示的效果不是很理想,于是想改成自适应的效果.对CSS3不是特别的熟练,只能去网上找找案例看了.发现一个不错的文章.写的比较入门,也很仔细.所以拿过来分享给大家.如果还想看图片的响应式案例可以看我找的另外的一篇<分享一个非常有用的HTML5+CSS3响应式图片案例>. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈

响应式网页设计

随着越来越多类型的移动设备的普及,网页设计也随之变化,响应式网页设计应用而生,目前已有有很多比较流行的框架解决此问题,无论切换任何设备,都会自动根据设备的大小进行动态变化,无需为每个量身定做不同类别的网页,大大节省了开发工作量,响应式网页设计已经成为一种趋势. 一.流行的前端(from_end)设计框架很多,大概有以下几种: 1. Bootstrap Boostrap绝对是目前最流行用得最广泛的一款框架.它是一套优美,直观并且给力的web设计工具包,可以用来开发跨浏览器兼容并且美观大气的页面.它

响应式网页设计的20个误区

响应式网页已经成为当下比较主流的设计形式,似乎每一个人都在谈论,但实际上并不是每一个人都真的懂得.以下总结了在进行响应式网页设计时的20个误区,你可以看看自身是否存在入其中所说的问题. 1.响应式网页设计 = 移动端优化 是的,当下确实移动互联网发展迅猛,所以响应式网页设计一直被当作重点,而且在概念上是主角.但它也不是唯一,因为你还要考虑到设备.如:平板和电视.响应式网页的真正目的是使网页适应任何屏幕,任意比例和宽度的互联网产品.这些远远超出了手机的范畴. 2.尽可能在多样的设备上测试 在设计领

响应式网页设计入门

响应式网页设计(Responsive Web Design)这个概念在2000年的时候就有人提出来了,其实我更喜欢将其翻译为自适应网页设计,阮一峰关于Responsive Web Design的一篇文章就是翻译为自适应网页设计,但是国内都采用了响应式网页设计这一生硬的翻译(你能第一次看到响应式网页设计这种称呼而联想到他的具体含义吗?).既然这种二流翻译已经是主流,我也采用响应式网页设计这一说法. 在阮一峰的自适应网页设计这篇文章中他举了一个例子来说明这种设计的应用. 下面是对阮一峰这篇文章中该片

20个响应式网页设计中的“神话”误区

关于响应式网页的重要性我们已经证实了很长时间了,现在是该把焦点放到如何做出好的响应式网页设计的时候了.一起来看看吧! 虽然很多人都在谈论响应式网页,但并不是每个人都知道他们在说什么.很多时候你看到网上的一些信息也在挑战你对响应式的理解. 有时候一些小报告给你建设性的建议,并帮助你的设计朝着正确的方向发展.但有些时候你会很迷茫,而且设计思路会与实际相反.当出现这种情况的时候不要责备任何事情.响应式网页设计的领域还是很新,而且所有的这一切都在产出中. 除此之外,创造传闻和“神话”是人类的一种本性.尽