响应式网页设计

1.专业术语的英文解释

中文 英文
响应式网页设计 Responsive Web Design
超文本标记语言 Hyper Text Markup Language(HTML)
视口 viewport
媒体查询 media queries
流体网格布局 fluid grid
弹性图片 flexible images
弹性/流式 fluid/flexible
层叠样式表 Cascading Style Sheets (C S S)
前端/后端 Frontend /Backend

专业术语的名词解释

  • 响应式网页设计:是一种网络页面设计布局,其理念是:集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境进行相对应的布局; 响应式网页设计出来的页面应该有能力去自动响应用户的设备环境,以一种弹性化来适当调整当前页面所适应的分辨率、图片尺寸及相关脚本功能等
    RWD的三项组成科技:

  • 弹性/流体网格布局:默认情况下显示适用于[移动电话]的“流体网格”。网格布局其实是根据当前浏览器或手机屏幕所适配的字体大小,当你点击选择进入新的超链接时,显示文本便会根据屏幕缩放自动重排,网页根据视口大小在任何媒体查询之间灵活伸缩修正样式。

  • 弹性图片:弹性图片它的效果可以根据我们的用户所在使用的不同屏幕尺寸来改变图片的像素,从而适应当前的浏览环境。以前没有RWD的时候,我们的屏幕只能显示原本设置好的画面大小,并不能具体地调整页面显示的效果。

  • 媒体查询:媒体查询可以让我们在某些条件下(如宽度和高度为多少的情况下)为网页应用样式。出自 响应式Web设计HTML5和CSS3实战 一书

  • 媒体查询实质上是针对所有的媒体的基本样式,在此基础上,再针对不同能力的设备来加以拓展,从而便于我们达到良好的视觉。

  • 可用于媒体查询的特性包括 width,height和color。通过媒体查询,即使不修改内容本身,也可让网页适配不同的设备。

  • RWD中的前端和后端的关系、区别?

  • 前端就大概等同于网页设计师,后端就是会写程序的网页开发工作者(偏计算机系专业),而我们所学的倾向于前端工程师的内容。

前端:包括网页的设计,制作页面外观以及页面的交互设计,其实就是用户所看到的表象是属于前端的范围。
后端:后端则更多的是与数据库进行交互以处理相应的业务逻辑。需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等。偏向技术性的开发设计。
关于前端和后端的详细区别


2.我们为什么需要“响应式网页设计”?

一直以来,以往的web网页设计多数是根据后端程序员所编写的固定代码来显示页面,并不能根据当前用户所使用的设备来具体调整。这样来一方面不仅得不到良好的用户体验,而且还加重了程序员的工作量,程序员需要编出好多套不同样式的代码。不过到现在,我们可以通过使用RWD来根据用户设备来具体调整显示的页面。

2016-2017年的全球手机、手提、台式电脑市场份额
  • 在以往,人们使用的设备更多是台式和手提电脑,但随着科技的发展,手机的应用范围更多,手机开始可以代替电脑的使用。因而,由上图可知,在2016年中下旬(10月左右),手机移动端的使用率开始超过电脑、平板的使用率,市场份额逐渐由手机移动端位居榜首。
2017-2018年的全球移动供应商设备所占的市场份额
  • 由此图,我们可以得出移动端的使用率较高,响应式web开发的市场也越来越大,通过RWD应用,我们在浏览网页也会愈加流畅、自然。

那么RWD的优越何在呢?

从化中学网站
  • 该网页没有运用RWD,当我们使用手机来浏览其网页,它所显示的图并不完整,缺少画面的动态感和画面感。而且如果我们想在手机上选择一个新的超链接,需要移动或放大才容易点击。
母校-常平中学网站
  • 该网页使用了RWD,当我们在网页上浏览,它会自动适配我们的设备,并且可以完整的看到整个页面,画面感也有,我的母校的计算机教师挺有水平的。 从二图对比可知,使用了RWD的页面效果会好很多,可以提高浏览者的阅读兴趣。
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 196,264评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,549评论 2 373
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 143,389评论 0 325
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,616评论 1 267
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,461评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,351评论 1 273
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,776评论 3 387
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,414评论 0 255
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,722评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,760评论 2 314
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,537评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,381评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,787评论 3 300
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,030评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,304评论 1 252
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,734评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,943评论 2 336

推荐阅读更多精彩内容

  • 一、名词解释 名词引用自教科书——《响应式Web设计——HTML5和CSS3实战(第二版)》 响应式Web设计(R...
    GeekJun阅读 744评论 0 3
  • 名词解释: Web标准:WEB标准不是某一个标准,而是一系列标准的集合。网页主要由三部分组成:结构(Structu...
    wo_jzf阅读 1,329评论 0 1
  • 名词解释 响应式Web设计(Responsive Web Design) 所谓响应式Web设计,就是网页内容会随着...
    Autistic_8d3b阅读 908评论 0 0
  • 名词解释 (来源:《响实》及网络) 响应式Web设计(Responsive Web Design): 简称RWD,...
    kkyyoo阅读 603评论 0 1
  • 最近做了两件事。 一、重读笑傲江湖。 二、听毛不易的歌 重读笑傲江湖是因为它又被翻拍了,看了几眼后实在是辣眼睛,赶...
    浅浅夜色阅读 1,140评论 0 0