响应式网页设计

名词解释(来源于网络)

HTML5

万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改。

CSS3

CSS3是CSS(层叠样式表)技术的升级版本,于1999年开始制订,2001年5月23日W3C完成了CSS3的工作草案,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。
CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。浏览器厂商按CSS节奏快速创新,因此通过采用模块方法,CSS3规范里的元素能以不同速度向前发展,因为不同的浏览器厂商只支持给定特性。但不同浏览器在不同时问支持不同特性,这也让跨浏览器开发变得复杂。

RWD

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

JavaScript

1.是一种解释性脚本语言(代码不进行预编译)。
2.主要用来向HTML(标准通用标记语言下的一个应用)页面添加交互行为。
3.可以直接嵌入HTML页面,但写成单独的js文件有利于结构和行为的分离。
4.跨平台特性,在绝大多数浏览器的支持下,可以在多种平台下运行(如Windows、Linux、Mac、Android、iOS等)。

视口(viewport)

在 Windows的作图函数中,涉及逻辑坐标到设备坐标的转换。这里提到的窗口(window)、视口(viewport)是对应的概念。视口是与设备相关的一个矩形区域,坐标单位是与设备相关的“像素”,大多数情况下,视口与客户区相同。窗口的坐标是逻辑坐标,与设备无关,可能是像素、毫米或者英寸。窗口坐标的原点与视口坐标的原点始终对应于同一点。对于同一个图形,用窗口坐标系统表达的该区域的长和宽与视口的坐标系统表达的长和宽是不同的。二者就定义了这两个坐标系统的比例关系。程序作图时,使用的坐标总是是窗口坐标。而实际的显示或输出设备却各有自己的坐标。

Sublime Text

Sublime Text 是一个代码编辑器(Sublime Text 2是收费软件,但可以无限期试用),也是HTML和散文先进的文本编辑器。Sublime Text是由程序员Jon Skinner于2008年1月份所开发出来,它最初被设计为一个具有丰富扩展功能的Vim。
Sublime Text具有漂亮的用户界面和强大的功能,例如代码缩略图,Python的插件,代码段等。还可自定义键绑定,菜单和工具栏。Sublime Text 的主要功能包括:拼写检查,书签,完整的 Python API , Goto 功能,即时项目切换,多选择,多窗口等等。Sublime Text 是一个跨平台的编辑器,同时支持Windows、Linux、Mac OS X等操作系统。

VIM

Vim是一个类似于Vi的著名的功能强大、高度可定制的文本编辑器,在Vi的基础上改进和增加了很多特性。VIM是自由软件。
Vim普遍被推崇为类Vi编辑器中最好的一个,事实上真正的劲敌来自Emacs的不同变体。1999 年Emacs被选为Linuxworld文本编辑分类的优胜者,Vim屈居第二。但在2000年2月Vim赢得了Slashdot Beanie的最佳开放源代码文本编辑器大奖,又将Emacs推至二线, 总的来看, Vim和Emacs在文本编辑方面都是非常优秀的。

Visual Studio

是美国微软公司的开发工具包系列产品。VS是一个基本完整的开发工具集,它包括了整个软件生命周期中所需要的大部分工具,如UML工具、代码管控工具、集成开发环境(IDE)等等。所写的目标代码适用于微软支持的所有平台,包括Microsoft Windows、Windows Mobile、Windows CE、.NET Framework、.NET Compact Framework和Microsoft Silverlight 及Windows Phone。

Notepad

notepad(记事本)是代码编辑器或WINDOWS中的小程序,用于文本编辑,在文字编辑方面与Windows写字板功能相当。是一款开源、小巧、免费的纯文本编辑器。
Notepad内置支持多达 27 种语法高亮度显示(囊括各种常见的源代码、脚本,值得一提的是,完美支持 .nfo 文件查看),也支持自定义语言。

max-width

max-width,JavaScript中的语法,用于定义元素的最大宽度。(规则:要保证所有图片最大显示为其自身100%,即最大只可以显示为自身那么大)

为何需要“响应式网页设计”?(图中数据来自gs.statcounter.com)

由此图可以看出,移动用户总量总体处于上升阶段,越来越多的人选择使用移动客户端来登录网站、使用网络。


微信图片_20180310154335.png

由此图可以看出,不同设备间的分辨率相差明显,且范围较广。


微信图片_20180310154350.png

综上,在移动设备的不断发展以及屏幕分辨率的各种差别之下,网页设计者们应该以更舒适的网页设计去匹配不同的机型,以满足不同用户使用网站时的舒适度以及便捷度,为用户提供更好地体验感。

有无使用响应式Web设计的例子(内容来自网络)

有使用的例子——
阿迪达斯官网https://www.adidas.com.cn/campaign/sports_women?utm_source=Baidu&utm_medium=SEM&utm_term=%E9%98%BF%E8%BF%AA%E8%BE%BE%E6%96%AF%E5%AE%98%E7%BD%91%E4%B8%AD%E6%96%87%E7%BD%91%E7%AB%99&utm_campaign=adidas%5FWOMEN&utm_content=18Xcat%2DWomen%2DBrand%28P%29

无使用的例子——
135编辑器http://www.135editor.com/

RWD的三项组成科技(解释来源于网络)

流动网格(Fluid Grids),灵活的图片(Flexible Images)和媒体查询(Media Queries)是对于响应式网页设计的三种技术元素,但它们也是需要不同想法的方式。

流式网格:

概念要求页面元素使用相对单位如百分比或字体排印学调整大小,而不是绝对的单位如像素或点;

灵活的图片:

也以相对单位调整大小(最大到 100%),以防止它们显示在包含它们的元素外面;

媒体查询:

允许网页根据访问站点设备的特点而使用不同 CSS 样式规则,最常用的是浏览器的宽度。

RWD和前后端的关系(内容来自网络)

与前端的关系

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

与后端的关系

对应jsp、javaBean 、dao层、action层和service层的业务逻辑代码。(包括数据库)

教科书及RWD一词提出人Marcotte的文章(内容来自课本)

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

“然而,在网上工作则完全是另一回事。我们的工作被定义为短暂的,常常在一两年内完善或取代。不一致的窗口宽度,屏幕分辨率,用户偏好以及我们用户安装的字体只是我们在发布我们的工作时谈判的一些无形资产,多年来,我们已经变得非常擅长。但景观正在转移,可能比我们想象的要快。移动浏览预计将在三到五年内超过基于桌面的访问。三种主流视频游戏控制台中的两种具有网络浏览器(其中一种非常出色)。我们正在设计鼠标和键盘,T9键盘,手持游戏控制器,触摸界面。总之,我们面临比以往更多的设备,输入模式和浏览器。”(来自Marcotte的文章)

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

推荐阅读更多精彩内容

  • 名词解释 1、响应式web设计:响应式web设计可以让一个网站同时适配多种设备和多个屏幕,可以让网站的布局和功能随...
    Sugwa阅读 903评论 0 0
  • 响应式网页设计 定义: 响应式Web设计(Responsive Web design)是:页面的设计与开发应当根据...
    little_bottle09阅读 648评论 0 4
  • 名词解释 响应式Web设计(Responsive Web Design=RWD): 由Ethan Marcotte...
    pooncheukkei阅读 763评论 0 0
  • 名词解释 响应式web设计:基于HTML5和css3的RWD响应式web设计,页面内容会随着视口及设备的不同而呈现...
    N黄舒婷阅读 448评论 0 0
  • 「前半生目光所及皆是无法靠近的人,无力圆满的事,还有余生弥补不了的誓言」 四季不再随缘而轮转,只剩暮秋凛冬;缺角的...
    喵记几阅读 146评论 0 0