交互细节丨什么是响应式网页设计,这种设计有何优缺点

1. 什么是响应式网页设计?

1.1 响应式网页设计的概念

响应式网页(Responsive Web Design,通常缩写RWD)的概念是Ethan Marcotte在2010的时候,在他A List Part的文章中提出来的:网页设计应该要根据不同设备环境灵活转换和调整,能够适应不同显示设备的分辨率大小,如台式电脑、笔试本电脑、平板、手机等等,同时减少缩放、平移和滚动。

作者:龙哥     图片来源:https://isux.tencent.com/responsive-web-design.html?variant=zh-hans        出自文章:isux.tencent.com/responsive-web-design.html

e.g.

图片来源:http://alistapart.com/d/responsive-web-design/ex/ex-site-larger.html


1.2 响应式网页设计与自适应网页设计的区别?

自适应网页设计与响应式网页设计的概念区别好像众说纷纭,但目前个人觉得好像对业界来说,过分纠结这两者的意义也不大,大略了解下便可,最重要的是找到最适合自己网站的设计、采用最适合的技术。

这两个概念的提出都是基于越来越多的终端设备的出现背景,都旨在使用技术来使网页能够从小到大来适应不同分辨率的屏幕。有说法是:响应式网页设计是自适应网页设计保护的一个子集。

作者 Viljami Salminen   文章链接: viljamis.com/2012/adaptive-vs-responsive-design/

响应式网页设计的概念是Ethan Marcote在他的文章中提出的:响应式网页设计是采用CSS的media query技术,配合流体布局(fluid grids)和可以自适应的图片视频等资源素材。这是通过HTML和CSS就可实现的。而且,响应式设计是采用流体+断点(break point)的,在遇到断点改变页面样式之前,页面是会随着窗口大小自动缩放的(fluid grids)。响应式设计是倾向于在不改变内容的前提下,改变呈现的外观布局。

自适应设计是Aaron Gustafson提出的,他提出自适应设计是在使用响应式的CSS media query技术之外,还要通过Javascript来操作HTML来让网页更加适应移动设备。且自适应设计是在针对特定几种分辨率进行优化(e.g. 1280px, 800px, 640px),在断点之间的过渡较少。自适应设计还可能会根据移动端情况来减少部分功能和内容。


2. 响应式网页设计的优缺点是什么?

1.1 优点

①跨平台:响应式网页设计本身最大的特点;

②节省开发成本:不用根据不同设备来进行开发维护;

③在不同平台上的表现内容保持一致性,体验良好;

1.2 缺点

①局限性大,自由度低:因为在设计时要考虑不同设备的呈现效果,必然会导致在设计表现方式等方面会有更多的局限性;

②会影响加载速度,也会导致不必要的流量浪费:为了适配不同的设备,响应式页面需要大量为不同设备打造的CSS样式代码,这样便会影响页面的加载速度。而且页面中图片视频资源一般是统一加载,因而在低分辨率的设备上,会加载了大于它显示要求的图片视频,这也会影响加载速度且导致流量浪费。当用户在网络状态不良好的情况下打开网页时,可能会造成很不好的体验;

③部分浏览器的支持问题:对于非webkit内核的浏览器支持极差,不过目前来说这个问题应该不大了。


3. 小结

响应式网页设计是给不同设备的用户都提供一样的内容,但根据不同设备的状况来分别设计,能够更加充分地发挥出不同设备的优势来。

虽然响应式网页设计有着它很明显的优势,但使用与否,还是需要慎重考虑是否符合自己网页的页面类型。像对于内容型资讯型的网站,它们的页面结构较为简单,确实适合响应式页面,能够在保证各个设备都能被良好设计和呈现的局限条件下,减少对不同设备的开发成本。但对于大型门户网站、电商网站来说,它们的页面内容非常多,响应式网页设计恐怕就不适合它们了。像天猫、淘宝,如果要在适配网页端和移动端的局限条件下设计网页,就要舍弃掉很多的设计可能性了,响应式网页设计带来的成本减少可能也会极大地减少了它收益。这还不如为网页、移动端分别来设计,以得到一个最适合网页端的设计和最适合的移动端的设计,以最大化自身的收益。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,362评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,330评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,247评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,560评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,580评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,569评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,929评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,587评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,840评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,366评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,945评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2 342

推荐阅读更多精彩内容