响应式网页设计

名词解释

  • 响应式Web设计:所谓响应式Web设计(Responsive Web Design.),就是网页内容会随着访问它的视口以及设备的不同而呈现不同的样式。
  • HTML:HTML(Hyper Text Markup Language)中文译为“超文本标记语言”,主要是通过HTML标记对网页中的文本、图片、声音等内容进行描述。
  • WWW:WWW(World Wide Web)中文译为“万维网”,是Internet提供的一种网页浏览服务。
  • URL:Uniform Resource Locator,中文译为“统一资源定位符”,URL其实就是Web地址,俗称“网址”。
  • DNS:DNS是域名解析系统。
  • HTTP:HTTP中文译为“超文本传输协议”,是一种详细规定了浏览器和万维网服务器之间互相通信的规则。
  • Web:Web通常指互联网的使用环境,但对于网站制作者来说,它是一系列技术的复合总称,通常称为“网页”。
  • JavaScript:是Web页面中的一种脚本语言,它可以将静态页面转变成动态页面(在网站建设中用于为页面添加动态效果)。
    (以上名词解释大部分来自RWD教科书)
谁提出了“响应式Web设计”?

这个名字是Ethan Marcotte在2010年发明的,当时,他在A List Apart上写了一篇文章(http://www.alistapart.com/articles/responsive-web-design/),这篇文章综合运用了弹性网格布局、弹性图片/媒体、媒体查询这三种技术实现了一个解决方案。

为什么我们需要响应式设计?

Desktop vs Mobile vs Tablet Market Share Worldwide - February 2018
Desktop vs Mobile vs Tablet Market Share Worldwide Feb 2017 - Feb 2018
Desktop vs Mobile vs Tablet Market Share Worldwide Jan - Dec 2016
  • 如图所见,从2016年十月中下旬开始,全球手机的市场占有率开始反超台式电脑的市场占有率,从那以后全球手机的市场占有率逐渐占据上风,而台式电脑的市场占有率则是逐渐降低,到现在趋于一个平稳的值,而平板的市场占有率一直都处于较低处,十分平稳,由这几个数据图我们可以得知,随着时代的发展,手机用户的数量不断增多,现在使用手机已经是主流了,而且大多数人都是用手机看网页了(因为方便又快捷),所以这时就需要响应式设计了,响应式设计可以让网页内容随着访问视口及设备的变化而变化,让用户能有更好的观看体验和网页体验。

  • 现在也有很多网站使用了响应式设计,例如:

华东师范大学(http://www.ecnu.edu.cn/

手机看时,它是这样的:


手机所看到的华东师范大学的网站版面
  • 版面十分整洁了,不用自己拖动版面~

网页版是这样的:

电脑所看到的网站版面
  • 当然也有不使用响应式设计的网站,例如:
bilibili弹幕网(https://www.bilibili.com/

用手机看的话,版面是这样的:


手机会看到的画面
  • 如果没有响应式设计的话,用户在手机查看网页的时候就会十分的不方便(但是这个网站是有手机APP的,这个就另说了)

关于RWD的三项组成科技

  • 结构标准:用于对网页元素进行整理和分类,主要包括两部分:XML和HTML

  • 表现标准:用于设置网页元素的版式、颜色、大小等外观样式,主要指的是CSS

  • 行为标准:是指网页模型的定义以及交互的编写,主要包括两部分:DOM和ECMA Script

  • 详细可查看:https://baike.so.com/doc/7548673-7822766.html

RWD与前后端的关系

  • 前端:前端对于网站来说,通常是指,网站的前台部分包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发,前端设计一般可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括基本的HTML和CSS以及JavaScript/ajax,现在最新的高级版本HTML5、CSS3,以及SVG等。
    (引用:https://baike.so.com/doc/6484003-6697709.html

  • 后端:后端更多的是与数据库进行交互以处理相应的业务逻辑。需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等。

  • 关于前端与后端的区别:https://wenda.so.com/q/1483645922727892?src=140

  • 前端开发人员:前端工程师、平面设计师,需要学好CSS,学习JavaScript的基本语法,最好能了解Unix和Linux的基本知识。

  • 后端开发人员:后端工程师,会写Java代码,会写SQL语句,能做简单的数据库设计,会Spring和iBatis,懂一些设计模式等。

  • 最后,由前端以及后端开发人员所需具备的能力来看,想要设计优秀的响应式网页,是和能力优异的前后端开发人员是密不可分的,可以说是RWD的一个很重要的部分了。

以上是我的感想以及我所理解的响应式网页设计,谢谢♪(・ω・)ノ

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念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

推荐阅读更多精彩内容

  • 响应式网页设计 定义: 响应式Web设计(Responsive Web design)是:页面的设计与开发应当根据...
    little_bottle09阅读 677评论 0 4
  • 名词解释 响应式web设计:基于HTML5和css3的RWD响应式web设计,页面内容会随着视口及设备的不同而呈现...
    N黄舒婷阅读 455评论 0 0
  • 名词解释 1、响应式web设计:响应式web设计可以让一个网站同时适配多种设备和多个屏幕,可以让网站的布局和功能随...
    Sugwa阅读 934评论 0 0
  • 名词解释 响应式web设计:所谓响应式web设计,就是网页内容会随着访问它的视口及设备的不同而呈现不同的样式。 H...
    Innogen99阅读 279评论 0 3
  • 术语解释 RWD:全称为Response Web Design(响应式Web设计) 。响应式Web设计:网页会随着...
    LZzzHe阅读 429评论 0 0