响应式网页设计

响应式Web设计

响应式Web设计(Responsive Web design简称RWD):

名词解释:一种新的网站设计模式,以此构建的网站可自动适应不同的访问设备(从桌面电脑、平板电脑到智能手机),方便用户阅读和导航浏览,减少用户的放大/缩小/滑动操作,从而提供完整而友好的用户体验。

为何需要"响应式网页设计"
下图为市场调查机构statcounter提供的2016年全年与2017年二月至2018年2月的台式电脑、手机与平板电脑的全球市场份额:

StatCounter-comparison-ww-monthly-201601-201612.png
StatCounter-comparison-ww-monthly-201702-201802.png

由以上两组数据可看出:
使用手机的人数在逐年增加,并在2016年十月中后旬超过了使用台式电脑的人数,并在2017一直保持着多于台式电脑的使用人数,但总体上二者的使用人数差距并不算大。
然而,手机、平板电脑与台式电脑屏幕大小差距还是十分显著的。而原先的普通网页无法自动适应不同的设备,所以常会出现在台式电脑屏幕上正常大小的网页在改用手机等移动设备访问时界面变得小且不方便浏览。在使用不同电子设备的人数逐渐增多的大背景下,使网页更好的适应访问设备屏幕也变得越来越有必要。且响应式网页设计仅使用HTML5和CSS3而不用后端支持。因其的方便被更多的人需要。

案例:
● Airbnb [www.airbnb.com]
以下为Airbnb网站在不同访问设备上的显示情况
iPad:

ipad.png

三星Galaxy S5:
三星Galaxy S5.png

台式电脑:
台式电脑.png

以上三幅图片可以了解到,Airbnb网站采用响应式网页设计模式,使得网站界面在不同设备不同尺寸的屏幕上呈现出与之相适应的效果。使访问者能更方便的浏览内容。

● 中国传媒大学 官网:[http://www.cuc.edu.cn/]
以下为中国传媒大学官方网站在不同访问设备上的显示情况

三星Galaxy S5:


Galaxy S5.png

iPad:


ipad.png

台式电脑:
台式电脑.png

由以上三张图看出,该网站没有使用响应式网页设计,因而同样的界面在不同设备屏幕上就呈现出截然不同的效果。于台式电脑屏幕上该页面大小适中且符合屏幕比例,可当更换成三星手机或者iPad时,页面的比例与屏幕就变得些许失调,文字与图片也变得不方便阅读。

关于RWD

● RWD的三项组成科技:

弹性网格布局(fluid grid)
弹性图片/媒体(flexible images)
媒体查询(media queries)

● RWD的前端与后端:

前端(front-end):前端对于网站来说,通常是指网站的前台部分。前端设计一般可以理解为网站的视觉设计。
后端(back-end):后端对于网站,通常是指网站的逻辑部分,主要涉及数据库,动态语言如PHP、ASP、JSP等。

前端与后端有何联系?
在我看来,前端就好像是网站的前台,而前端工作主要负责网站的界面展现与用户交互方面。而后端则更像是幕后的管理者,负责着网页的后台数据库等编程工作,维护着平台的稳定与良好的性能。因此,前端与后端二者是相互协调,相辅相成且不可或缺的关系。

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

推荐阅读更多精彩内容

  • 名词解释 响应式网页设计响应式网页设计就是当用户打开一个网站时,网站内容的样式会随着用户使用设备以及视口的不同而·...
    onion_d46a阅读 307评论 0 0
  • 一、名词解释 名词引用自教科书——《响应式Web设计——HTML5和CSS3实战(第二版)》 响应式Web设计(R...
    GeekJun阅读 750评论 0 3
  • 名词解释: Web标准:WEB标准不是某一个标准,而是一系列标准的集合。网页主要由三部分组成:结构(Structu...
    wo_jzf阅读 1,332评论 0 1
  • 名词解释 Internet:就是通常所说的互联网,是由一些使用公用语言相互通信的计算机连接而成的网络 WWW(Wo...
    你猜_42e0阅读 586评论 0 0
  • 前言 大概2月中上旬的时候,因为个人原因,向公司提出离职,过程中虽然有一点波折,但是还是成功的而且好聚好散的在三月...
    拉丁吴阅读 4,583评论 31 60