响应式网页设计

名词解释

1、响应式web设计:响应式web设计可以让一个网站同时适配多种设备和多个屏幕,可以让网站的布局和功能随用户的使用环境(屏幕大小,输入方式,设备/浏览器能力)而变化。基于HTML5和CSS3的的响应式web设计,并不需要依赖服务端或后端方案。
2、RWD:响应式网站设计(简称RWD)是一种新的网站设计模式,以此构建的网站可自动适应不同的访问设备(从桌面电脑、平板电脑到智能手机),方便用户阅读和导航浏览,减少用户的放大/缩小/滑动操作,从而提供完整而友好的用户体验。
3、HTML5:万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改。
4、CSS3:CSS3是CSS(层叠样式表)技术的升级版本,于1999年开始制订,2001年5月23日W3C完成了CSS3的工作草案,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。
5、CSS3媒体查询:可以让我们针对特定的设备能力或条件为网页应用特定的CSS样式。
6、JavaScript:JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能
(注,以上条目解释摘自百度百科和书本《响应式web设计》)
7、流式网格:概念要求页面元素使用相对单位如百分比或字体排印学调整大小,而不是绝对的单位如像素或点;
灵活的图片:也以相对单位调整大小(最大到 100%),以防止它们显示在包含它们的元素外面;
媒体查询:允许网页根据访问站点设备的特点而使用不同 CSS 样式规则,最常用的是浏览器的宽度。
——内容摘自网站segmentfault中用户“Bizhong”发表的《浅析RWD》一文

为何需要响应式web设计

根据市场调查机构 statcounter 的数据显示,在2016年至今,在2016年的十月份时候,世界上使用手机屏幕浏览的人数超过了使用电脑桌面浏览的人。
“现今,无论是移动设备、平板电脑、PC,屏幕大小各不相同,若是针对每个屏幕大小单独设计一个解决方案,则会大幅增加网站建设的复杂程度和运营成本。响应式网页设计的概念就是可以让网页根据用户的使用环境进行自动调整,有效的改善用户体验。”——引用网站segmentfault中用户“Bizhong”发表的《浅析RWD》一文


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

这说明了世界上许多人改变了他们的浏览环境,从电脑到手机,也增加了人们对响应式web设计的需求。
而且响应式Web让Web作品适配手机、平板和桌面电脑,适应用户的屏幕大小,为今天和明天的设备都提供最佳用户体验。

有无使用响应式web设计的例子

网站bilibili没有使用响应式web设计https://www.bilibili.com/index.html
bilibili网页电脑端截图.jpg

bilibili网页手机端截图.jpg
网站意派Coolsite360 使用了响应式web设计http://www.coolsite360.com
意派网页电脑端截图.jpg
意派网页手机端截图.png

RWD的三项关键

响应式网站设计有三个关键组成部分:1. media query; 2. 流动网格;3. 灵活缩放的图片。
基于RWD而设计的网站利用CSS3 media queries规则来自动适应不同访问设备的屏幕尺寸和显示要求。而流动网格采用页面元素大小的相对单位(百分比或EM),而非传统设计使用的绝对单位(像素或点数),以确定页面各组成元素的大小。最后,图片大小也是采用相对单位而灵活缩放,不至于在小屏幕的移动设备上超出显示区域。——内容摘自百度百科

RWD和前后端的关系

需要依赖后端方案的RWD:
网页版、手机版、等等分开服务、设计、产出页面

不需要依赖后端方案的RWD:
网页版、手机版、等等一起服务、设计、产出页面

基于HTML5和CSS3就可以制作不需要后端方案的RWD
——内容摘自课件

什么是响应式web设计

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

“响应式网页设计(Responsive Web Design,通常缩写为 RWD),又称为自适应网页设计、回应式网页设计。是一种现代网页设计方法,该设计基于 CSS3 的媒介查询(Media Query)特性使得网页适应不同设备,即根据设备的分辨率和缩放自动重新布局,同时减少缩放、平移和滚动。”——内容摘自网站segmentfault中用户“Bizhong”发表的《浅析RWD》一文

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

推荐阅读更多精彩内容