响应式网页设计


第一章

所谓 响应式Web设计,就是网页内容会随着访问它的视口及设备的不同而呈现不同的样式。

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

  • 弹性网格布局( fluid grid )
  • 弹性图片/媒体( flexible images )
  • 媒体查询(media queries)
  • 视口(viewport)
  • 设备(device)

1.名词解释

  • 固定宽度

目标是让所有用户都拥有相同的体验

StatCounter是美国一家网站通讯流量监测机构,提供各种类型的统计报告以及网站流量统计服务。
用户嵌入StatCounter 代码后,可以查看网站访问量、访问来源、访问地区、浏览器类型等。StatCounter统计功能强大、页面比较简洁,还可以当做计数器使用,用户也可以隐藏统计图标。

  • 弹性网格(flexible grids)

可基于屏幕分辨率扩展或拉伸内容。

  • 媒体查询(media queries)

是放在站点HTML和样式表中的代码段,用来收集设备显示能力的信息以支持多种形式的界面。

  • 视口(viewport)

浏览器中用于呈现网页的区域

  • CSS(层叠样式表)

是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

  • 前端(front-end)

通常是指,网站的前台部分包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发,前端设计一般可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括基本的HTML和CSS以及JavaScript/ajax,现在最新的高级版本HTML5、CSS3,以及SVG等。

  • javascript

一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

  • 后端(backend)

后端开发应是指后台程序设计,包括数据库设计动态代码编写,一般需要掌握下面几种语言和数据库:ACCESS,SQL,HTML,ASP,PHP,JSP,.Net,VBscript 或Javascript.

前端与后端
前端与后端
  • 文本编辑器/工具

文本编辑器(或称文字编辑器)是用作编写普通文字的应用软件,它与文档编辑器(或称文字处理器)不同之处在于它并非用作桌面排版(例如文档格式处理),它常用来编写程序的源代码。
例如Sublime Text、Vim、Coda、Visual Studio、Notepad


2.

全球桌面与移动与平板电脑市场份额2016年1月至12月

全球桌面与移动与平板电脑市场份额2017年2月 - 2018年2月

从StatCounter提供的信息中,可以发现原本在2016年之前桌面的市场份额大于移动和tablet的市场份额,并且移动的市场份额一直呈上升的趋势,但在16年11月之后,移动的市场份额超越了桌面市场。这说明了越来越多的人们使用移动上网,为了让使用手机上网的用户更好的上网体验,响应式网页设计是一个不可或缺的存在。


3.有无采用响应式Web设计的例子对比

弹性网格(flexible grids),可基于屏幕分辨率扩展或拉伸内容。
媒体查询(media queries),是放在站点HTML和样式表中的代码段,用来收集设备显示能力的信息以支持多种形式的界面。
视口(viewport),浏览器中用于呈现网页的区域

在上述二者的例子中,我们可以发现采用了响应式设计的网站的体验显然更好。第一,响应式网站可以根据不同终端、不同尺寸和不同应用环境,自动调整界面布局、展示内容、内容大小,提供非常好视觉展示效果,给用户带来了良好的体验。第二,它可以节省成本,不再需要有人特地维护PC页面,移动页面,节省人力物力。

前端(front-end),通常是指,网站的前台部分包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发,前端设计一般可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括基本的HTML和CSS以及JavaScript/ajax,现在最新的高级版本HTML5、CSS3,以及SVG等。
后端(backend),后端开发应是指后台程序设计,包括数据库设计动态代码编写,一般需要掌握下面几种语言和数据库:ACCESS,SQL,HTML,ASP,PHP,JSP,.Net,VBscript 或Javascript.

一个网站的呈现需要前端与后端的相互合作。前端负责网站的页面结构,外观视觉以及获取用户信息;后端则负责业务逻辑,实现功能、数据的存取、平台的稳定性与性能等。二者的相互合作,保证了网站的正常运转。

以上为我的课堂整理和思考。

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

推荐阅读更多精彩内容

  • 一、名词解释 名词引用自教科书——《响应式Web设计——HTML5和CSS3实战(第二版)》 响应式Web设计(R...
    GeekJun阅读 762评论 0 3
  • 名词解释 响应式Web设计(Responsive Web Design) 所谓响应式Web设计,就是网页内容会随着...
    Autistic_8d3b阅读 926评论 0 0
  • 名词解释 响应式Web设计(Responsive Web Design=RWD): 由Ethan Marcotte...
    pooncheukkei阅读 807评论 0 0
  • 名词解释: Web标准:WEB标准不是某一个标准,而是一系列标准的集合。网页主要由三部分组成:结构(Structu...
    wo_jzf阅读 1,351评论 0 1
  • 响应式网页设计 定义: 响应式Web设计(Responsive Web design)是:页面的设计与开发应当根据...
    little_bottle09阅读 688评论 0 4